效果图：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script type="text/javascript">

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br />

<img id="drag1" src="/i/w3school_banner.gif" draggable="true" ondragstart="drag(event)" />

</body>

</html>

为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

数据类型是 "Text"，值是可拖动元素的 id ("drag1")

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

ondrop 属性调用了一个函数，drop(event)：

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

代码解释：

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素（目标元素）中

来回拖动图片：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script type="text/javascript">

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

  <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />

</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

【HTML5】拖放（Drag 和 drop）的更多相关文章

  1. HTML5 拖放---drag和drop

    拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:<div id="div" draggable="true"&g ...

  2. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

  3. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  4. HTML5拖放(drag和drog)

    拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...

  5. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  6. 炫酷的html5（Drag 和 drop）拖放

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...

  7. 拖放(Drag和Drop)--html5

    拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...

  8. HTML 5 拖放(Drag 和drop)

    浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...

  9. Android开发者指南-用户界面-拖放-Drag and Drop[原创译文]

      英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 译者注:黄色底色为未决译文 快 ...

  10. 在Blazor中实现拖放(drag and drop)

    前言 我在实现一个含有待办列表功能的页面时,发现了一个好看的设计,它将待办分为--"待办","正在进行",和"已完成"三种状态,并且将待办通 ...

随机推荐

  1. C开发基础－－函数调用栈

    发现有一些问题几乎是所有的新人都会遇到,而且也常因为缺乏一些基本的知识而无从下手.函数调用栈的内容就是其中之一.于是花点时间把以前写的内容整理出来. 程序在运行期间,内存中有一块区域,用来实现程序的函 ...

  2. HDOJ 3555 Bomb

    数位DP的DFS写法.... Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Oth ...

  3. editplus快捷键大全之editplus光标快捷键

    前面我们讲了editplus快捷键大全之editplus文件快捷键,现在我们介绍一下editplus快捷键大全之editplus光标快捷键 移动光标到上一个制表符Shift+Tab 移动光标到上一个制 ...

  4. xcode注释

    新开的项目需要先开发iOS版本,所以又把好久没写的iOS捡起来了,之前都是手动注释,最近是越来越懒了,所以在网上找了一个自动注释的插件,啊哈,其实有时候还真的挺怀念用Eclipse的时候,不过不用羡慕 ...

  5. Dynamo和Bigtable对比

    数据结构化问题        首先要提到的是两者存储数据属性上的区别,虽然两者都是以key/value形式进行存储,但Dynamo偏向存储原数据,因为其所存储的数据是非结构化数据,对value的解析完 ...

  6. ubuntu14.04安装dropbox

    官网地址: https://www.dropbox.com/install?os=lnx 自己的系统如果没有设置全局翻(qiang)代理,使用deb文件安装后不能直接使用,因为还需要到官网安装prop ...

  7. Minimum Size Subarray Sum

    Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...

  8. Segment Tree Query I & II

    Segment Tree Query I For an integer array (index from 0 to n-1, where n is the size of this array), ...

  9. 动态设置Div坐标

    <style type="text/css"> #main{text-align:center; background-color:#9FF; height:600px ...

  10. 分享一个Cnblogs简易APP

    最近在学习Android app的开发,俗话说万事开头难,本人也不例外.计算机编程是属于一门要求动手能力和动脑能力都很强的学科,相信很多人都会有这样的经历,看得懂不去用,过不了几天也就忘记了.因而,在 ...