浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome、Safari 5都支持拖放。

注释：不支持在Safari 5.1.2中拖放。

HTML5 拖放实例

！DOCTYPE html html head style type=' text/CSS ' # div 1 { width :488 px；height:70pxpadding:10pxborder:1px实心# aaaaaa}/style script type=' text/JavaScript '函数Allowdrop(ev){ ev . Preventdefault()；}函数drag(ev){ ev . DataTransfer . Setdata(' Text '，ev . target . id)；}函数drop(ev){ ev . PreventDefault()；var data=ev . datatransfer . getdata(' Text ')；ev . target . appendchild(document . getelementbyid(data))；} /script /head body p请将Aseoe logo的图片拖放到矩形中：p div id=' div 1 ' on drop=' drop(event)' ondragover=' allow drop(event)' div br/img id=' drag 1 ' src=' http://www . Asoe.com/statics/images/eoe/logo . png ' drag gabble=' true ' ondragstart=' drag(event)'//body/html

设置元素为可拖放

首先，为了使元素可拖动，请将可拖动属性设置为true:

拖动什么 - ondragstart 和 setData()

然后，指定拖动元素时会发生什么。

在上面的例子中，ondragstart属性调用了一个函数drag(event)，它指定了被拖动的数据。

方法设置被拖动数据的数据类型和值：

函数drag(ev){ ev . DataTransfer . Setdata(' Text '，ev . target . id)；}

在本例中，数据类型为“文本”，值为drag1的id。

放到何处 - ondragover

ondragover事件指定将拖动的数据放置在何处。

默认情况下，数据/元素不能放入其他元素中。如果我们需要设置允许的放置，我们必须阻止元素的默认处理。

您可以通过调用ondragover事件的event.preventDefault()方法来实现这一点：

event.preventDefault()

进行放置 - ondrop

放置拖动的数据时会发生拖放事件。

在上面的例子中，ondrop属性调用一个函数drop(事件):

函数drop(ev){ ev . Preventdefault()；var data=ev . datatransfer . getdata(' Text ')；ev . target . appendchild(document . getelementbyid(data))；}

代码解释：

调用preventDefault()以避免浏览器对数据的默认处理(丢弃事件的默认行为是作为链接打开)

通过dataTransfer.getData('Text ')方法获取拖动的数据。此方法将在setData()方法中返回相同类型的任何数据集。

被拖动的数据是被拖动元素的标识(“拖动1”)

将拖动的元素附加到放置的元素(目标元素)

总结

这就是本文的全部内容。希望本文的内容对你学习或使用HTML5有所帮助。有问题可以留言交流。感谢大家对脚本之家的支持。