html元素拖动,html实现拖拽效果

　　恐怕很多前端都不知道如何实现HTML5拖拽。本文理解如下思路。整理并备份以备将来参考。

　　上面的例子：

　　index.html

　　XML/HTML代码将内容复制到剪贴板！doctypehtml html head metacarset= UTF-8 title拖动/标题样式。box { width:400 px；高度：400px浮动：左；} #box1{背景：# CCC} #box2{背景：# FF0}/style/head body divid= box 1 class= box /div divid= box 2 class= box /div img src= http://pica . zol-img . com . cn/2016/02/1 ace 90 ad 77 db 716547614 a 18c4a 9263g . jpg alt= id= img 1 /JavaScript代码将内容复制到剪贴板scriptsrc= app1.js/scriptobo x2=document . getelementbyid( box 2 )；oim G1=document . getelementbyid( img 1 )；//obox 1 . ondragover=obo x2 . ondragover=function(e){ e . prevent default()；};//oimg 1 . ondragstart=function(e){ e . data transfer . setdata( text ，e . target . id)；};obox 1 . ondrop=drop img；obo x2 . ondrop=drop img；};functiondropImg(e){ e . prevent default()；vartempImg=document . getelementbyid(e . data transfer . get data( text ))；e . target . appendchild(tempImg)；}涉及知识点

　　拖放过程中将触发以下事件：在拖动目标上触发事件 (源元素)

　　当用户开始拖动一个元素时触发。

　　当一个元素被拖动时触发。

　　当用户完成拖动一个元素时触发。

　　释放目标时触发的事件ondragenter-当鼠标拖动的对象进入其容器范围时触发该事件。

　　ondragover-当一个被拖动的对象在另一个对象容器的范围内被拖动时，该事件被触发。

　　ondragleave-当鼠标拖动的对象离开其容器范围时触发该事件。

　　ondrop-在拖动过程中释放鼠标按钮时触发该事件。

　　event对象（以e代替）

　　e .目标

　　W3Cschool上的解释是：返回触发此事件的元素(事件的目标节点)。此目标属性仅与ie9及更高版本兼容。

　　预防默认()

　　取消事件的默认操作。

　　e.dataTransfer.setData()

　　设置被拖动数据的数据类型和值：复制代码如下：e.datatransfer.setdata (text ，ev . target . id)；//第一个参数是文本(小写也可以)

　　e.dataTransfer.getData()

　　获取拖动的数据：复制代码如下：e . data transfer . get data( Text )；

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

　　原文：http://www.cnblogs.com/oovwall/p/5213580.html

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