你的位置:首页 > 软件开发 > 网页设计 > HTML5 DragEvent

HTML5 DragEvent

发布时间:2017-02-26 00:00:14
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 (#换成@)。