H5 拖放事件详解

拖放事件

H5的拖放事件提供了多个接口：

1、drag：当元素或者选中的文本被拖动时触发（每几百毫秒触发一次），应用在被拖拽元素上

2、dragend：当拖动操作结束时触发（通过释放鼠标按钮或者点击转义键），应用在被拖拽元素上

3、dragenter：当一个被拖动的元素或者选中的文本进入一个有效的放置目标时触发，应用在目标元素上

4、dragexit：当元素不再是拖动操作的直接选择元素时触发（很少使用）

5、dragleave：当拖动元素或者选中的文本离开有效的放置区域时触发，应用在目标元素上

6、dragover：当元素或者选中的文本被拖动到有效放置区域上方时触发（每几百毫秒触发一次），应用在目标元素上

7、dragstart：当用户开始拖动元素或者拖动选中文本时触发，应用在被拖拽元素上

8、drop：当元素或选中的文本在有效区域放置时触发，应用在目标元素上

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
  <!--为兼容IE dataTransfer只能放在这里-->
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

var dragged;

/* 事件在拖拽元素上触发 */
document.addEventListener("drag", function( event ) {

}, false);

/* 事件在拖拽元素上触发 */
document.addEventListener("dragstart", function( event ) {
  // 存储相关的拖拽元素
  dragged = event.target;
  // 设置拖拽元素的透明度
  event.target.style.opacity = .5;
}, false);

/* 事件在拖拽元素上触发 */
document.addEventListener("dragend", function( event ) {
  // 重设透明度
  event.target.style.opacity = "";
}, false);

/* 事件在目标区域触发 */
document.addEventListener("dragover", function( event ) {
  // 默认情况下是无法允许一个元素放置在另一个元素上的，要放置必须阻止默认行为
  event.preventDefault();
}, false);

/* 事件在目标区域触发 */
document.addEventListener("dragenter", function( event ) {
  // 当拖拽元素进入潜在放置区域时，高亮处理
  if ( event.target.className == "dropzone" ) {
      event.target.style.background = "purple";
  }

}, false);

/* 事件在目标区域触发 */
document.addEventListener("dragleave", function( event ) {
  // 当拖拽元素离开潜在放置区域时重置该目标区域的背景
  if ( event.target.className == "dropzone" ) {
      event.target.style.background = "";
  }

}, false);

document.addEventListener("drop", function( event ) {
  // 阻止默认行为（drop的默认处理方式是当初链接处理）
  event.preventDefault();
  // 把拖拽元素移入目标区域
  //这里要经过两步处理
  // 1、先把拖拽元素从原父元素中删除（这步不是必须的）
  ///2、然后再添加到目标区域
  if ( event.target.className == "dropzone" ) {
      event.target.style.background = "";
      dragged.parentNode.removeChild( dragged );
      event.target.appendChild( dragged );
  }
}, false);

event.dataTransfer

在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型

这个对象在所有的拖动事件属性dataTransfer 都是可用的，但是不能单独创建。

dataTransfer属性（比较多，简单罗列几个）

dropEffect：

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

可能的值:

copy: 复制到新的位置

move: 移动到新的位置.

link: 建立一个源位置到新位置的链接.

none: 禁止放置（禁止任何操作）.

设置其他值会导致拖放失败

effectAllowed：

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

可能的值:

copy: 复制到新的位置.

move:移动到新的位置 .

link:建立一个源位置到新位置的链接.

copyLink: 允许复制或者链接.

copyMove: 允许复制或者移动.

linkMove: 允许链接或者移动.

all: 允许所有的操作.

none: 禁止所有操作.

uninitialized: 缺省值（默认值）, 相当于 all.

设置其他值会导致拖放失败

items：

拖拽的数据集合

types：

该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型，返回值是一个数组

dataTransfer方法（比较多，简单罗列几个）

setData()

将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据，有点像jquery里面的data

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

getData(format)

从dataTransfer对象中获取指定格式的数据，format代表数据格式，如果给定类型的数据不存在或者数据转存（data transfer）没有包涵数据，方法将返回一个空字符串。

这个数据将仅仅在放置动作发生时在drop时间中是可用的

clearData([format])

从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。

addElement(element)

设置拖动源。通常不需要改变这项，如果修改将会影响拖动的那个节点和dragend事件的触发。默认目标是被拖动的节点。

setDragImage(image,x,y)

设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

大多数情况下，这项不用设置，因为被拖动的节点被创建成默认图片。

参数

image

要用作拖动反馈图像元素

x

图像内的水平偏移量.

y

图像内的垂直偏移量.

案例

div>div{
	display:inline-block;
	padding: 10px;
	background-color: #aaa;
	margin: 3px;
}

<div style="width:600px;border:1px solid black;">
	<h2>可将喜欢的项目拖到收藏夹</h2>
	<div draggable="true" ondragstart="dsHandler(event);">勿忘心安</div>
	<div draggable="true" ondragstart="dsHandler(event);">照顾自己</div>
	<div draggable="true" ondragstart="dsHandler(event);">Number 9</div>
	<div draggable="true" ondragstart="dsHandler(event);">崇拜</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
	<h2 ondragleave="return false;">收藏夹</h2>
</div>
<div id="gb" draggable="false" style="width:100px;height:100px;border:1px solid red;float:left;">我是垃圾桶</div>

var dest = document.getElementById("dest");
var dsHandler = function (evt){
	evt.dataTransfer.setData("text/plain","<item>"+evt.target.innerHTML);
}

dest.ondrop = function(evt){
	var text = evt.dataTransfer.getData("text/plain");
	if(text.indexOf("<item>") == 0){
		var newEle = document.createElement("div");
		newEle.id = new Date().getUTCMilliseconds();
		newEle.innerHTML = text.substring(6);
		newEle.draggable = "true";
		newEle.ondragstart = function(evt){
			evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);
		}
		dest.appendChild(newEle);
	}
}

document.getElementById("gb").ondrop = function(evt){
	var id = evt.dataTransfer.getData("text/plain");
	if(id.indexOf("<remove>") == 0){
		var target = document.getElementById(id.substring(8));
		dest.removeChild(target);
	}
}

document.ondragover = function(evt){
	return false;
}

document.ondrop = function(evt){
	return false;
}

案例来自：https://my.oschina.net/jiangli0502/blog/179197

补充：

text/html & text/plain的区别

Content-Type：用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据

MIME：MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

text/html的意思是将文件的content-type设置为text/html的形式，浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。

text/plain的意思是将文件设置为纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理。

参考资料

https://developer.mozilla.org/en-US/docs/Web/Events/drag

https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer

https://my.oschina.net/jiangli0502/blog/179197