DragEvent是一个表示drag和drop交互的DOM event接口。用户通过将指针设备(如:鼠标)放在目标的表面开始拖动,然后拖动指针到一个新的位置(如其他DOM元素)。应用程序自动的解析拖放交互。DragEvent接口从mouseEvent和Event那儿继承属性。Ev ...
DragEvent是一个表示drag和drop交互的DOM event接口。用户通过将指针设备(如:鼠标)放在目标的表面开始拖动,然后拖动指针到一个新的位置(如其他DOM元素)。应用程序自动的解析拖放交互。DragEvent接口从mouseEvent和Event那儿继承属性。
Event types
DragEvent并不是一个单一的事件,它包含了多个事件,这些事件分别是:drag,dragstart,dragenter,dragend,dragover,dragexit,dragleave,drop。
drag:这个事件在元素拖拽的过程中反复触发,每一百毫秒触发一次。这事件的目标元素是被拖的那个元素,该事件可冒泡,可取消默认行为。
dragstart:这个事件在用户开始拖动时触发。这个事件的目标元素是被拖的那个元素,在这些事件中,dragstart事件最先触发。该事件可冒泡,可取消默认行为。
dragenter:这个事件在被拖的元素进入一个合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡,可取消默认行为。
dragover:当被拖的元素在可drop目标范围内移动时反复触发这个事件,一百毫秒触发一次。这个事件的目标元素是这个可drop目标。该事件可冒泡,可取消默认行为。
dragend:当拖拽结束时触发这个事件,这个事件的目标元素是被拖的元素。在这些事件中dragend最后触发。该事件可冒泡,不能取消默认行为。
dragleave:这个事件在被拖得元素离开合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡,不能取消默认行为。
dragexit:当一个可drop元素不再是拖拽操作最近的drop目标时触发这个事件。这个事件的目标元素是这个可drop元素。该事件可冒泡,不嫩取消默认行为。
drop:当在可drop目标上松开拖动元素的指针设备时触发这个事件,该事件的目标元素是这个可drop目标。drop事件在dragend事件触发之前触发。这个事件可冒泡,可取消默认行为。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>test target</title> <style type="text/css"> #drag{ width:200px; height:200px; background-color: aqua; } .drop{ width: 300px; height: 300px; background-color: antiquewhite; } </style></head><body> <div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')"> 我可以拖动 </div> <img src='/images/loading.gif' data-original="test.jpg" id="img"> <div ></div> <script type="text/javascript"> document.addEventListener('drag',function(event){ event.target.style.backgroundColor = 'black'; },false); document.addEventListener('dragstart',function(event){ event.target.style.backgroundColor = 'red'; },false); document.addEventListener('dragend',function(event){ event.target.style.backgroundColor = 'yellow'; },false); document.addEventListener('dragover',function(event){ event.preventDefault(); event.target.style.backgroundColor = 'blue'; },false); document.addEventListener('dragenter',function(event){ event.target.style.backgroundColor = 'green'; },false); document.addEventListener('dragleave',function(event){ event.target.style.backgroundColor = 'pink'; },false); document.addEventListener('dragexit',function(event){ event.target.style.backgroundColor = 'red' },false); document.addEventListener('drop',function(event){ event.preventDefault(); event.target.style.backgroundColor = 'white'; console.log(2); },false) </script></body></html>
原标题:HTML5 DragEvent
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。