[02] The whole process of drag and drop - Konjac

01. Create 2 elements, one is the drag and drop element dragEle, and the other is the stored element targetEle. Add some styling.

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

02. Set the dragEle attribute draggable attribute to true. make it draggable.

03. Set the dragstart event of dragEle.

<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: At this point, dragEle can be dragged. As shown below:

04. Set the target element to receive the dragged element.

dragover event

If we need to set allow placement, we must prevent the default handling of elements.

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

05, the drop event of the target element, add the drag and drop element to the target element.

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

The complete code is as follows:

<!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>

[02] The whole process of drag and drop - Konjac

Guess you like