html5 拖放操作集锦

一、相关重点

1. DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
2. draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：

   <div title="拖拽我" draggable="true">列表1</div>

3. ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
4. ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
5. ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
6. ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
7. ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
8. Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
9. Event.effectAllowed 属性：就是拖拽的效果。
   
   

二、拖放事件

将一个或多个DOM元素标为可拖动元素只完成了一部分工作。想让你的拖放操作实际可以使用，而且对最终用户有视觉吸引力，就要处理某些事件。下面列出了这些事件：

事件描述dragstart拖动操作开始时，该事件被触发。drag元素拖动时，该事件被触发。dragenter可拖动元素被拖动，并输入有效的拖放目标后，该事件被触发。dragleave被拖放到有效拖放目标的可拖动元素离开拖放目标后，该事件被触发。dragover可拖动元素被拖放到有效拖放目标上方后，该事件被触发。drop已拖动元素被拖放到有效拖放目标上面后，该事件被触发。dragend拖动操作结束后，该事件被触发。

你可以两种方法将事件处理函数连接到这些事件，即在DOM元素标记中，使用onxxxx语法，或者使用JavaScript（或基于JavaScript的库，如jQuery）。下列标记和代码显示了这两种方法。

<div class="myclass" draggable="true" ondragstart="OnDragStart" ondrop="OnDrop"></div>

$("div").each(function () { 

  this.addEventListener('dragstart', OnDragStart, false); 

  this.addEventListener('drop', OnDrop, false); 

});

要注意上述代码如何使用jQuery代码中的addEventListener()方法来连接事件处理函数。

三、拖操作与放操作之间传送数据

大多数时候，拖动某个元素，然后把它拖放到另外某个元素上也需要在源元素与目标元素之间传送一些数据。为了完成这项数据传送任务，HTML5提供了DataTransfer对象。下列表格列出了DataTransfer对象的一些重要属性和方法。

属性/方法描述effectAllowed表明所允许操作的类型。可能的值是：none、copy、copyLink、

copyMove、link、linkMove、move、all和uninitialized。

dropEffect表明目前选择的操作的类型。如果操作类型得不到effectAllowed

属性的支持，那么操作就失效。可能的值是：none、copy、link和move。

setDragImage ()设置拖动操作期间显示的特定元素。setData()设置所传送的特定数据。getData()检索之前设置的数据，以便进一步处理。clearData()清除之前存储的数据。

你通常会在dragstart和drop事件处理函数中使用dataTransfer对象的属性和方法。