HTML5--DropAPI

HTML5拖放（Drag和Drop）

拖放的目的是可以让你将某个对象放置到你想放置的位置。

拖放的对象

源对象--->指的是被拖动的对象

目标对象--->指的是你要放的位置 那个对象

拖放过程中会触发的事件

在拖动目标上触发的事件（源元素）：

• ondragstart - 用户开始拖动元素时触发
• ondrag - 元素正在拖动时触发
• ondragend - 用户完成元素拖动后触发

释放目标时触发的事件

• ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
• ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
• ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
• ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

拖动的源对象与目标对象之间的数据传递

• 源对象数据保存 e.data.Transfer.setData(key,value)
• 目标对象获取数据 e.data.Transfer.getData(key)

实现拖放的基本步骤

1. 将源对象的draggable="true",将元素设置为可拖动
2. 在源对象的ondragstart 方法里使用event.data.Transfer.setData(K,V) ;源对象的数据保存
3. 放到何处？？在目标对象上设置ondragover()方法 或者类似的方法； event.data.Transfer.getData(K);目标对象取出数据

P.S：在目标对象的ondragover里要设置event.preventDefault(); 如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

实现一个拖放的demo:

需求：从box里可以将box里的图片拖到其他几个红色的box里，拖放到红色box里的时候会原来的box会生成一个img图片。红色box里的图片可以随便拖拽到其余红色框里。

分析：这里的img图片就是源对象，其余的box2,box3,box4就是目标对象;目标box里的img可以相互拖动；

html代码：设置img的draggable="true" 及ondrapstart()事件里的代码；设置目标box2，box3,box4的ondragover()和ondrop()

          <div id="box">
			<img src="img/jump1.jpg" id="drag1" draggable="true" ondragstart="dragstart(event)" alt="jumpImage">
		</div>
		<div id="box2" class="box" ondragover="dragover(event)" ondrop="drop(event)">

		</div>
		<div id="box3" class="box" ondragover="dragover(event)" ondrop="drop(event)">

		</div>
		<div id="box4" class="box" ondragover="dragover(event)" ondrop="drop(event)">

		</div>

JS代码

			function dragstart(event) {
				//将源对象的id "drag1"作为数据保存,方便目标对象获取源对象的id
				event.dataTransfer.setData("Text", event.target.id);
				//将源对象的父元素的id保存
				event.dataTransfer.setData("Text2",event.target.parentNode.id);
			}

			function dragover(event) {
				// 如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
				event.preventDefault();
			}

			function drop(event) {
				// 如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
					// console.log(event.target.id ); // 这里的target是目标对象
					event.preventDefault();
					//获取源对象的id
					var data = event.dataTransfer.getData("Text");
					//将源对响 放在目标对象里,作为目标对象的孩子节点
					var srcImg = document.getElementById(data);
					// srcImg.setAttribute("draggable", false);
					event.target.appendChild(srcImg);
					//创建一个img dom对象,并设置一些属性
					var parentNodeId=event.dataTransfer.getData("Text2");
					//当父元素ID为box时表明是从box拖动出的元素,此时会在box里生成一个img dom元素
					if(parentNodeId=="box"){
						var img = document.createElement("img");
						img.setAttribute("src", "img/jump1.jpg");
						img.setAttribute("id", "drag" + Math.random() * 10);
						//设置该对象可以拖动
						img.setAttribute("draggable", true);
						//设置拖动事件
						img.setAttribute("ondragstart", "dragstart(event)");
						img.setAttribute("alt", "jumpImage");
						
						var parentNode = document.getElementById(parentNodeId);
						//将dom对象放在box下
						parentNode.appendChild(img);
					}
			}

 实现效果：页面初始状态

 将图片拖拽到第二个红框box里后，原来的框会多出一个img图片

将第二个红框box里的图片拖到第三个红框里