HTML HTML5 PHP Mysql Linux 缓存技术 工具 资讯 读书 其他

HTML5 拖拽


拖拽是HTML5标准的一部分.


W3Schools

拖动W3xuexi图片到矩形框内.


拖拽

拖拽是经常应用的特性.你可以"抓住"一个对象将其拖动到不同的位置.

在HTML5中,拖拽是标准的一部分,任何元素都可以拖拽.


浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

IE9+, 火狐, 欧朋, 谷歌, 苹果浏览器都支持拖拽.

注意: 拖拽不能再苹果浏览器5.1.2版本中使用.


HTML5拖拽的例子

下面是简单的拖拽例子:

例子

<!DOCTYPE HTML>
<html>
<head>
<script>
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)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

亲自试一试 »

看起来很复杂,我们可以通过不同的拖拽事件逐个了解.


创建一个拖拽元素

首先: 创建一个拖拽元素, draggable属性为true:

<img draggable="true">


拖拽什么 - ondragstart 和 setData()

然后,指定元素拖时会发生什么.

上面的例子中,ondragstart属性调用一个方法drag(event),来指定被拖动的数据.

数据转换.setData()设置数据类型和拖动数据的值:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中, 数据类型是"文本"类型,并且值是拖拽元素的id("drag1").


拖拽到哪儿 - ondragover

ondragover事件指定拖拽的数据可以拖拽到哪儿.

默认情况下, 数据/元素不能拖拽到其他元素中. 为了可以拖动,我们不想阻止元素的默认处理.

可以使用event.preventDefault() 方法进行禁止:

event .preventDefault()


开始拖拽 - ondrop

当数据被拖拽时,落下事件被触发.

上面的例子中,ondrop调用了一个方法drop(event):

function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码说明:

  • 调用preventDefault()方法阻止浏览器默认对数据的处理(默认处理是拖动时作为链接打开)
  • 通过dataTransfer.getData("Text")方法,获取拖动数据. 这个方法会返回在setData()中,设置相同类型的任何数据
  • 拖动数据是拖动元素的id ("drag1")
  • 追加拖动元素到降落元素中


例子

更多例子

来回拖动图像
如何来回拖拽两个<div> elements.


To Top