Javascript知识整理——拖放

拖放事件

拖动某元素时，将依次触发下列事件（被拖动元素）：

• dragstart
  按下鼠标并开始移动鼠标时在被拖动元素身上触发。
• drag
  继dragstrat触发后，继续拖动会持续触发drag事件
• dragend
  当拖动停止时，会触发dragend事件

当某个元素被拖动到了一个有效的放置目标上时，下列事件会依次发生（放置目标）：

• dragenter
  只要有元素被拖动到放置目标上，就会触发dragenter事件
• dragover
  继dragenter后，在被拖动的元素还在放置目标的范围内移动，就会持续触发该事件
• dragleave或drop
  如果元素被拖出了放置目标，触发dragleave事件，如果元素被放到了放置目标中，会触发drop事件而不是dragleave事件。

自定义放置目标

在拖动元素经过某些无效放置目标时，可以看到有特殊的光标（圆环带斜线）来提示用户不能把元素放置在该目标上面，这些放置目标默认是不允许放置的，不管用户如何操作，都不会发生drop事件。

把元素变成有效的放置目标的方法：
重写dragenter和drogover事件的默认行为

EventUtil.addHandler(droptarget,"dragover",function(event){
     EventUtil.preventDefalut(event);
})
...

以上代码执行后，光标变成了允许放置的符号。释放鼠标也会触发drop事件。
由于在Firfox浏览器中，放置事件的默认行为是打开被放到放置目标的URL
因此还要取消drop事件的默认行为，阻止它打开URL

dataTransfer对象

dataTransfer是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据

• setData()
  接收两个参数，参数一是一个字符串，表示保存的数据类型，可设置为"text"或"URL"
  参数二为该类型的值
• getData()
  接收一个表示保存的数据类型的参数，返回传入setData()第二个参数的值

注意： 保存在dataTransfer对象中的数据只能在drop事件处理程序中读取，否则dataTransfer被销毁，数据也就丢失了。

浏览器的默认处理
在拖动文本框的文本时，浏览器会调用setData()方法，将拖动的文本以“text”格式保存在dataTransfer对象中，在拖动链接或图像时，会调用setData()保存URL，然后被拖动到放置目标是，就可以通过getData()读取这些数据。
我们也可以在dragStart事件处理程序中调用setData()，手工保存自己要传输的数据，以便将来使用。

dropEffect与effectAllowed

dropEffect属性可以知道被拖动的元素能够执行哪种放置行为（改变光标的样式），有四个可能的值

• "none"
  不能把拖动的元素放在这里，这是除文本框之外所有元素的默认值
• "move"
  应该把拖动的元素移动到放置目标
• "copy"
  应该把拖动的元素复制到放置目标
• "link:
  表示放置目标会打开拖动的元素。

effectAllowed属性表示允许拖动元素的哪种dropEffect

• "uninitiallized"
  没有给被拖动的元素设置任何放置行为
• "none"
  被拖动的元素不能有任何行为
• "copy"
• "link"
• "move"
• "copyLink"
• "copyMove"
• "linkMove"
• "all"
  允许任意dropEffect。

可拖动

默认情况下，图像、链接和文本是可以拖动的，让其他元素可以拖动的方法是设置元素的draggable属性为true

其他成员（兼容性较差）

HTML5规范规定dataTransfer还有以下方法和属性

• addElement(element)
• clearData(format)
• setDragImage(element,x,y)
• types