html拖放功能,html5拖动div
拖放
拖放是一个常见的功能，即抓住一个对象，然后将其拖到另一个位置。
在HTML5中，拖放是标准的一部分，任何元素都可以拖放。
Internet Explorer 9、Firefox、Opera、Chrome和Safari都支持拖动。
注意：Safari 5.1.2不支持拖动。
示例：
！DOCTYPE html html head title拖放/Title Style Type= Text/CSS # div 1 { width:360 px；高度：220px填充：20px边框：1px纯黑；}/样式脚本函数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 div id= div 1 ondrop= drop(event) ondragover= allow drop(event)/div br/img id= drag 1 src= img/Bg _ 1 . jpg draggable= true ondragstart= drag(event) width= 300 px height= 180 px //body/html首先，要使元素可拖动，请将draggable 属性设置为true: imgdraggable=
然后，指定拖动元素时会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数drag(event)，它指定了要拖动的数据。dataTransfer.setData() 方法设置拖动数据的数据类型和值：
函数drag(ev){ ev . data transfer . setdata( Text ，ev . target . id)；}在此示例中，数据类型为“文本”，值为可拖动元素的ID(“drag 1”)。
ondragover 事件指定放置拖动数据的位置。
默认情况下，数据/元素不能放在其他元素中。如果需要设置允许的放置，我们必须防止元素的默认处理。
这是通过调用ondragover 事件的 event.preventDefault() 方法: event.preventdefault()来完成的。
当放置拖动的数据时，将发生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”)
将拖动的元素追加到拖放的元素(目标元素)
来回拖动：
要在两个地方之间来回拖动，只需稍微修改一下上面的代码。
将正文中的代码改为：
body div id= div 1 ondrop= drop(event) ondragover= allow drop(event) img id= drag 1 src= img/BG _ 1 . jpg draggable= true ondragstart= drag(event)Width= 300 px height= 180 px //div div id= div 2 ondrop= drop(event) ondragover= allow drop(event)/div/body然后将#div2添加到样式中：
style type=text/css #div1，# div 2 { width:360 px；高度：220px填充：20px边框：1px纯黑；} /style这样就可以前后拖拽了。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。