拖放效果原理

摘录一些 比较重要的对象和事件以及属性

* 首先，要使元素能否能被拖拽，必须设置 draggable  = "true"  例如：<div  draggable =“true”>只有设置draggable才可以被拖拽</div>

* 一个很很重要的接口 DataTransfer，它是拖拽对象用来传递的媒介，它包含以下属性和方法

• dataTransfer.dropEffect [ = value ]：返回已选择的拖放效果，如果该操作效果与起初设置的effectAllowed效果不符，则拖拽操作失败。可以设置修改，包含这几个值：“none”, “copy”, “link” 和 “move”。
• dataTransfer.effectAllowed [ = value ]：返回允许执行的拖拽操作效果，可以设置修改，包含这些值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all” 和 “uninitialized”
• dataTransfer.types：返回在dragstart事件出发时为元素存储数据的格式，如果是外部文件的拖拽，则返回”files”
• dataTransfer.clearData ( [ format ] )：删除指定格式的数据，如果未指定格式，则删除当前元素的所有携带数据
• dataTransfer.setData(format, data)：为元素添加指定数据
• dataTransfer.getData(format)：返回指定数据，如果数据不存在，则返回空字符串
• dataTransfer.files：如果是拖拽文件，则返回正在拖拽的文件列表FileList
• dataTransfer.setDragImage(element, x, y)：制定拖拽元素时跟随鼠标移动的图片，x、y分别是相对于鼠标的坐标(据测试，Chrome暂不支持)
• dataTransfer.addElement(element)：添加一起跟随拖拽的元素，如果你想让某个元素跟随被拖拽元素一同被拖拽，则使用此方法(据测试，Chrome暂不支持)

Drag & Drop 包括以下事件：

• dragstart：要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素
• dragenter：拖拽元素进入目标元素时触发，这个事件对象是目标元素
• dragover：拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素
• dragleave：拖拽某元素离开目标元素时触发，这个事件对象是目标元素
• dragend：在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素
• drop：将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素

注意：在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。