html5 拖拽事件,html拖动事件

　　浏览器支持

　　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；高度：70px填充：10px边框：1px实心# aaaaaa}/style script type= text/JavaScript 函数allow drop(ev){ ev . prevent default()；}函数drag(ev){ ev . data transfer . setdata( Text ，ev . target . id)；}函数drop(ev){ ev . prevent default()；var data=ev . data transfer . get data( Text )；ev . target . appendchild(document . getelementbyid(data))；} /script /head body p请将Aseoe logo的图片拖放到矩形中：p div ID= div 1 ondrop= drop(event) ondragover= allow drop(event) div br/img ID= drag 1 src= http://www . asoe . com/statics/images/eoe/logo . png draggable= true ondragstart= drag(event)//body/html设置元素为可拖放

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

　　拖动什么 - ondragstart 和 setData()

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

　　在上面的示例中，ondragstart属性调用一个函数drag(event)，该函数指定要拖动的数据。

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

　　函数drag(ev){ ev . data transfer . setdata( Text ，ev . target . id)；}在此示例中，数据类型为“文本”，值为可拖动元素的ID(“drag 1”)。

　　放到何处 - ondragover

　　ondragover事件指定放置拖动数据的位置。

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

　　这是通过调用ondragover事件的event.preventDefault()方法来完成的：

　　event . prevent default()进行放置 - ondrop

　　当放置拖动的数据时，将发生drop事件。

　　在上面的示例中，ondrop属性调用函数drop(event):

　　函数drop(ev){ ev . prevent default()；var data=ev . data transfer . get data( Text )；ev . target . appendchild(document . getelementbyid(data))；}代码解释：

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

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

　　被拖动的数据是被拖动元素的ID(“drag 1”)

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

　　总结

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。