drag-and-drop,drag_and_drop
5分钟搞清楚html5的拖拽，以及其他监控事件和执行顺序。
定义和用法
拖放过程中将触发以下事件：
在拖动目标上触发事件(源元素):
ondragstart-ondrag当用户开始拖动元素时-当元素被拖动时Ondragend当用户完成拖动元素并触发释放目标时触发的事件：
当鼠标拖动的对象进入其容器范围时，触发该事件。ondragover-当一个被拖动的对象在另一个对象的容器范围内被拖动时触发该事件。ondragleave-当鼠标拖动的对象离开其容器范围时触发该事件。ondrop-在拖动过程中释放鼠标按钮时触发该事件。浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome和Safari都支持拖动。
注意：Safari 5.1.2不支持拖拽；拖动元素时，每350毫秒触发一次ondragover事件。
例子如下：
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge title 5分钟拖放简明示例/title style # draggable { width:200 px；高度：20px文本对齐：居中；背景：白色；} .空投区{宽度：200 px高度：20px背景：蓝紫色；边距-底部：10px填充：10px}/样式脚本变量被拖动；文档。addevent侦听器( dragstart ，函数(事件){ console。log(============dragstart开始被拖拽==========一次拖动只执行一次);//保存拖动元素的引用（参考)dragged=event.target//使其半透明事件。目标。风格。不透明度=。5;},假);/* 拖动目标元素时触发拖事件*/文档。addevent侦听器( drag ，function(event){//console。log(============拖动=======拖拽时会一直监听，直到放下元素);},假);/* 放置目标元素时触发事件*/文档。addevent侦听器( dragover ，function(event){//console。log(===========dragover=======拖拽时会一直监听，直到放下元素);//阻止默认动作以启用丢弃事件。防止默认()；},假);文档。addevent listener( drag enter ，function(event){ console。log(==========拖动回车拖曳元素进入目标元素==========对应着拖假’)；//当可拖动的元素进入可放置的目标时高亮目标节点如果(事件。目标。class name==拖放区){ event。目标。风格。背景=紫色；} },假);文档。addevent listener( drag leave ，function(event){ console。日志(==========拖着离开拖曳元素离开目标元素==========对应着拖动回车’)；//当拖动元素离开可放置目标节点，重置其背景如果(事件。目标。class name==拖放区){ event。目标。风格。背景=“”；} },假);文档。addevent侦听器( drop ，函数(事件){ console。日志(=========drop放下元素==========一次拖动只执行一次，在拖动进入前触发);//阻止默认动作（如打开一些元素的链接)事件。防止默认()；//将拖动的元素到所选择的放置目标节点中如果(事件。目标。class name==拖放区){ event。目标。风格。背景=“”；被拖走了。父节点。移除孩子(已拖动);event.target.appendChild(拖动);} },假);文档。addevent侦听器( dragend ，function(event){ console。log(===========dragend结束拖拽==========一次拖动只执行一次);//重置透明度事件。目标。风格。不透明度=" "；},假);/script/head body div class= drop zone div id= draggable draggable= true ondragstart=事件。数据传输。setdata( text/plain ，null)这是可以拖拽的DIV/DIV/DIV class=拖放区/DIV DIV class=拖放区/DIV DIV class=拖放区/DIV/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。