[js] drag

在拖动操作过程中，被拖动元素会以半透明形式展现，并跟随鼠标指针移动。

拖放基础

1 定义可拖动目标。
将我们希望拖动的元素的draggable属性设为true。

2 定义被拖动的数据，可能为多种不同格式。
例如，文本型数据会包含被拖动文本的字符串。

3 （可选）自定义拖动过程中鼠标指针旁边会出现的拖动反馈图片。
如果未设定，默认图片会基于鼠标按钮按下的元素（正在被拖动的元素）来自动生成。

4 允许设置拖拽效果。
有三种效果可以选择：
copy 用来指明拖拽的数据将从当前位置复制到释放的位置；
move 用来指明被拖拽的数据将被移动；
link 用来指明将在源位置与投放位置之间建立某些形式的关联或连接。
在拖拽的过程中，可以修改拖拽效果来指明在某些位置允许某些效果。
如果允许，你将可以把数据释放到那个位置。

5 定义放置区域。
默认情况下，浏览器阻止任何东西向HTML元素放置拖拽的发生。
要使一个元素称为可放置区域，需要阻止浏览器的默认行为，也就是要监听dragenter 和 dragover 事件。

6 在drop发生时做一些事情。
你可能想要获取拖拽目标携带的数据并做某些相应的事情。

拖放事件

在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如mousemove，是不会触发的。
当从操作系统拖拽文件到浏览器的时候，dragstart和dragend事件不会触发。

拖拽事件的dataTransfer属性存放了拖放操作中的相关数据。

dragstart
    当一个元素开始被拖拽的时候触发。
	用户拖拽的元素需要附加dragstart事件。
	在这个事件中，监听器将设置与这次拖拽相关的信息，例如拖动的数据和图像。
	
dragenter
    当拖拽中的鼠标第一次进入一个元素的时候触发。
	这个事件的监听器需要指明是否允许在这个区域释放鼠标。
	如果没有设置监听器，或者监听器没有进行操作，则默认不允许释放。
	当想要通过类似高亮或插入标记等方式来告知用户此处可以释放，将需要监听这个事件。
	
dragover
    当拖拽中的鼠标移动经过一个元素的时候触发。
	大多数时候，监听过程发生的操作与dragenter事件是一样的。
	
dragleave
    当拖拽中的鼠标离开元素时触发。
	监听器需要将作为可释放反馈的高亮或插入标记去除。
	
drag
    这个事件在拖拽源触发。
	即在拖拽操作中触发dragstart事件的元素。
	
drop
    这个事件在拖拽操作结束释放时于释放元素上触发。
	一个监听器用来响应接收被拖拽的数据并插入到释放之地。
	这个事件只有在需要时才触发。
	当用户取消了拖拽操作时将不触发，例如按下了Escape（ESC）按键，或鼠标在非可释放目标上释放了按键。
	
dragend
    拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。
	

一般来说要使用dragover与drop，需要先阻止默认行为

        window.addEventListener("dragover", function (e) {
            //阻止默认方法,取消拒绝被拖放
            e.preventDefault();
        })

        //添加页面drop事件
        window.addEventListener("drop", function (e) {
            //阻止默认方法，取消拒绝被拖放
            e.preventDefault();
        })

属性 Draggable

在HTML中，除了图片、超链接以及被选中区域，其它元素默认是不可拖拽的。
所有的XUL元素也都是可以拖拽的。
为了让别的HTML元素也能被拖拽，必须进行以下三步：

1 为所需拖拽的元素设置属性 draggable属性。
2 为 dragstart 事件添加侦听
3 在侦听中设置拖拽数据。

拖拽数据（Drag Data）

所有的拖拽事件都有一个属性——dataTransfer，它包含着拖拽数据。

拖拽发生时，数据需与拖拽关联，以标识谁在被拖拽。
如，当拖拽文本框中的选中文本时，关联到拖拽的数据即是文本本身。
类似，拖拽网页上的链接时，拖拽数据即是链接的URL。

拖拽数据包含两类信息，类型(type)或者格式(format)或者数据(data)，和数据的值(data value)。

格式即是一个表示类型的字符串（如，对于文本数据来说，格式为 "text/plain"），数据值为文本字串。
当拖拽开始时，你需要通过提供一个类型以及数据来为拖拽添加数据。
拖拽过程中，在dragenter 和 dragover 事件侦听中，需根据数据类型检测是否支持 drop（放下）。
如，接收超链接的 drop 目标会检测是否支持链接类型 text/uri-list。
在drop事件中， 侦听者（即事件处理函数）会获取拖拽中的数据并将其插入到 drop 位置。

类型指的是 MIME-type ，与 string 类似，如 text/plain 或者 image/jpeg。也可以自定义类型。

一次拖拽可能会提供多种不同类型的数据，这样就可以提供更详细的数据了（通常是自定义类型的数据）。
可以为drop目标体提供后备数据，如果这些目标体不支持更具体的类型的数据的话。
通常情况下，至少要指定类型为文本数据，即 text/plain 类型。

DataTransfer

dropEffect

设置实际的放置效果，它应该始终设置成 effectAllowed 的可能值之一 。

对于 dragenter 和 dragover 事件，dropEffect 将基于用户要求的动作被初始化设置。
对于 dragstart, drag和dragleave事件，dropEffect会被初始化为 “none”。
对于drop和dragend事件，dropEffect将被初始化成期望的动作，这个动作的值是最近的执行dragenter或者dragover事件后的dropEffect的值。

可能的值:

copy: 复制到新的位置
move: 移动到新的位置.
link: 建立一个源位置到新位置的链接.
none: 禁止放置（禁止任何操作）.

effectAllowed

用来指定拖动时被允许的效果。

可能的值:

copy: 复制到新的位置.
move:移动到新的位置 .
link:建立一个源位置到新位置的链接.
copyLink: 允许复制或者链接.
copyMove: 允许复制或者移动.
linkMove: 允许链接或者移动.
all: 允许所有的操作.
none: 禁止所有操作.
uninitialized: 缺省值（默认值）, 相当于 all.

分配任何其他值时不会有任何影响并且保留旧值

getData()

检索（取得）给定类型的数据，如果给定类型的数据不存在或者数据转存（data transfer）没有包涵数据，方法将返回一个空字符串。

如果你试图获取从不同域中拖动的数据将发生一个安全性错误或者无法访问，这个数据将仅仅在放置动作发生时在drop时间中是可用的。

String getData(
   in String type
 );

参数

type
    要检索的数据类型. 

setData()

为一个给定的类型设置数据。
如果该数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。
如果已经存在的数据类型，替换相同的位置的现有数据。
就是，当更换相同类型的数据时，不会更改类型列表的顺序。

void setData(
   in String type,
   in String data
 );

参数

type
    要添加的数据类型.
data
    要添加的数据. 

不支持直接传递对象类型数据，需要配合JSON.stringify JSON.parse 传递

setDragImage()

自定义一个期望的拖动时的图片。
大多数情况下，这项不用设置，因为被拖动的节点被创建成默认图片。

坐标指定图像相对于鼠标光标位置的偏移量。
例如，为使鼠标在图像中心，可以使用图像宽度和高度的值的一半。

void setDragImage(
   in Element image,
   in long x,
   in long y
 );

参数

image
    要用作拖动反馈图像元素
x
    图像内的水平偏移量.
y
    图像内的垂直偏移量.