html5拖动div,html5拖拽布局插件

　　在HTML5中，拖放是标准的一部分，任何元素都可以拖放。具体如下：1、拖放。

　　XML/HTML代码将内容复制到剪贴板！doctype html html head style type= text/CSS # div 1 { width:350 px；高度：70px填充：10pxborder:1 px solid # aaaaaa；} /style脚本functionallow drop(ev){ ev . prevent default()；} function drag(ev){ ev . data transfer . setdata( Text ，ev . target . id)；} function drop(ev){ ev . preven default()；var data=ev . data transfer . get data( Text )；ev . target . appendchild(document . getelementbyid(data))；} /script /head body p将W3CSchool.cc图片拖动到矩形框中：/p divid= div 1 ondrop= drop(event) ondragover= allow drop(event)/div bringid= Drag 1 src=/images/logo . png draggable= true ondragstart= Drag(event) width= 336 height= 69 /body/html2、设置元素为可拖放

　　首先，要使元素可拖动，请将draggable属性设置为true:imgdraggable= true 3、拖动什么 - ondragstart 和 setData()。

　　然后，指定拖动元素时会发生什么。在上面的示例中，ondragstart属性调用一个函数drag(event)，该函数指定要拖动的数据。dataTransfer.setData()方法设置拖动数据的数据类型和值：

　　代码将内容复制到剪贴板函数drag(ev){ ev . data transfer . setdata( text ，ev . target . id)；}在此示例中，数据类型为“文本”，值为可拖动元素的ID(“drag 1”)。4、放到何处 - ondragover

　　ondragover事件指定放置拖动数据的位置。默认情况下，数据/元素不能放在其他元素中。如果需要设置允许的放置，我们必须防止元素的默认处理。这是通过调用ondragover事件的event.preventDefault()方法来完成的：event.preventDefault()5、进行放置 - 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”)。将拖动的元素追加到拖放的元素(目标元素)。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

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