【02】一个实现h5的拖放的整个过程-魔芋

【02】拖放的整个过程-魔芋

01，创建2个元素，一个为拖放元素dragEle，一个是存放的元素targetEle。添加一些样式。

<div class="dragEle">
	我是可拖放的魔芋
</div>
<div class="targetEle">
	put place
</div>

02，设置dragEle的属性draggable 属性为 true。使它可以拖动。

03，设置dragEle的dragstart事件。

<div class="dragEle" id="dragEle" draggable="true" ondragstart="dragstart(ev)">
	我是可拖放的魔芋
</div>
<div class="targetEle" id="targetEle">
	put place
</div>
<script>
	function dragstart(ev){
		ev.dataTransfer.effectAllowed='move';
		ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
		ev.dataTransfer.setDragImage(ev.target,0,0);
		return true;
	}
</script>

PS：此时，dragEle可以拖动了。如下图：

04，设置目标元素可以接收拖动元素。

dragover 事件

如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

function dragOver(ev) {
	ev.preventDefault();
}

05，目标元素的drop事件，添加拖放元素到目标元素。

function dragDrop(ev) {
	
	var src = ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(src));
	ev.preventDefault();
	ev.stopPropagation();
}

完整代码如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="utf-8">
	<title>moyu's demo</title>
	<!-- 定义网页搜索引擎索引方式 -->
	<meta name="renderer" content="webkit">
	<!-- 360,以webkit内核进行渲染 -->
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<!-- 以最新内核进行渲染。 -->
	<meta http-equiv="Cache-Control" content="no-siteapp"/>
	<!-- 百度禁止转码 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		.dragEle {
			width: 100px;
			height: 100px;
			background: red;
		}

		.targetEle {
			width: 300px;
			height: 300px;
			background: yellow;
		}
	</style>
</head>

<body>

<div class="dragEle" id="dragEle" draggable="true" ondragstart="dragstart(event)">
	我是可拖放的魔芋
</div>
<div class="targetEle" id="targetEle" ondrop="dragDrop(event)" ondragover="dragOver(event)">
	put place
</div>
<script>
	function dragstart(ev) {
		ev.dataTransfer.effectAllowed = 'move';
		ev.dataTransfer.setData("Text", ev.target.id);
		var src = ev.dataTransfer.getData("Text");
	}

	function dragEnter(ev) {
		
	}
	function dragOver(ev) {
		ev.preventDefault();//或 return false;
	}
function dragDrop(ev) {
	
	var src = ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(src));
	ev.preventDefault();
	ev.stopPropagation();
}
</script>
</body>

</html>