首页风格
门户
博客

GBin1专题之HTML5教程 - 第六篇:HTML5 Drag and Drop

日期:2012-4-20  来源:GBin1.com

拖放/拖拽(drag and drop)是HTML5的标准之一。

拖放/拖拽(drag and drop)

这是个非常普遍的功能。你可以抓住一个对象,并且拖动到你想放置的区域。 很多javascript都类似实现了相关的功能,例如,jQueryUI的drag and drop组件。

在HTML5中,拖放/拖拽(drag and drop)是标准,任何元素都支持。

浏览器支持

iefirefoxchromeoperasafari

IE9,Firefox,Chrome和Safari 5都支持这个特性。

注意:Safari 5.1.2不支持

拖放/拖拽(drag and drop)演示

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

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

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</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,如下:

<img draggable="true" /> 

如何拖动 - ondragstart() 和 setData()方法

然后,我们指定当一个元素拖动的时候会执行的操作。

在上面的演示中,ondragstart属性调用了一个方法, drag(event),这里指定了那个数据被拖动。

dataTransfer.setData()方法设置了数据类型和被拖动的数据:

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

在这里例子中,data type是"Text",数值是被拖动元素的ID。

哪里去放置(drop) - ondragover

ondragover事件指定了拖动的元素可以被放置的位置。

缺省,数据/元素不能被drop到另外的元素。 为了允许drop,你需要先阻止缺省的处理方式。我们可以调用event.preventDefault()方法,如下:

event.preventDefault()

执行放置(drop)

当可拖动的数据被drop的时候,drop事件触发。

在上面的例子中,ondrop属性可以调用一个方法,drop(event):

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

以上代码:

  • 使用dataTransfer.getData("Text")得到被拖动的数据。这个方法将会返回setData()方法中设置的任何数据。 
  • 被拖动的数据是可以拖动元素("drag1")的id
  • 添加可拖动的元素到放置的元素
  • 调用preventDefault()方法来阻止浏览器的缺省数据处理方式(例如,打开链接)

如果大家想看看一个完整功能的拖拽实现,请参考这篇教程:分享一个HTML5的drag and drop API实现的图片拖拽分组效果

来源:GBin1专题之HTML5教程 - 第六篇:HTML5 Drag and Drop

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐