Implement custom drag and drop of elements with JavaScript

Main content: Drag and drop of JS elements
Development date: 2019-12-09

1. Drag

Draggable attribute: draggable = "true";　
　　default draggable element: 　　compatibility: Chrome safair is used normally, some versions of Firefox are available 　

Second, the life cycle of drag

1. Drag start ondragstart
2. Dragging ondrag
3. Drag end ondragend

Three, the composition of drag

1. The object being dragged
　　ondragstart ondrag ondragend
2. The target area
　　ondragenter ondragover ondragleave ondrop

Fourth, element dragging (the object being dragged)

(1) Effect display

(2) Implementation method

	ele.ondragstart = function(e){
		beginX = e.offsetX;
		beginY = e.offsetY;
		console.log(e);
	}
	//在拖拽的过程中就会触发
	ele.ondrag = function(e){
		console.log(1);
	}
	ele.ondragend = function(e){
		ele.style.top = e.clientY-beginX + "px";
		ele.style.left = e.clientX-beginY + "px";
		console.log("拖拽结束");
	}

V. Target element event (target area)

(1) Effect display

(2) Implementation method

	var target = document.getElementsByClassName("target")[0];
	//被拖拽物体已经入目标区域
	//只有在鼠标进入时才会触发
	target.ondragenter = function(e){
		console.log("被拖拽物体已经入目标区域")
	}
	target.ondragover = function(e){
		/**
		 *	阻止默认事件, ondragleave 与 ondrop => 链模式
		 *		ondragleave 与 ondrop 是冲突的，想要ondrop 触发，
		 *		则必须在ondragleave 之前禁用，即在ondragover 中设置阻止默认行为。
		 *		对于ondrop防止浏览器的默认处理数据，调用preventDefault()，
		 *		ondrop事件的默认行为是链模式；
		 */
		e.preventDefault()
		console.log("拖拽的元素在目标元素中持续触发");
	}
	target.ondragleave = function(e){
		console.log("被拖拽的元素离开目标区域才会触发")
	}
	target.ondrop = function(){
		console.log("拖拽元素在目标区域内松开鼠标时触发");
		/* ondrop   这个行为触发两个事件    
		ondragend（拖拽的元素回到原处）    
		ondragleave（被拖拽的元素离开目标区域）   
		链模式   over-- a(drop) --b(dragend)/c(leave)
		*/	
	}

Six, drag and drop dataTransfer

(1) Effect display 1: ClearData () is not set to clear the currently set data

Effect display: ClearData () is set to clear the currently set data
(2) Implementation method

	初始化一个DataTransfer对象，用于保存拖拽数据和交互信息的媒介.
		1.DataTransfer对象调用方式：event.DataTransfer.
		2.dropEffect : 拖拽交互类型     copy,move,link,none
		3.setData(format,data) : 设置数据  以键值对的形式存储数据   (text, "文本数据");
		4.getData(format)   获取数据
		
	/* 实例 */
	<div id="d1"><img src="imgs/clothes04.jpg" width="218" id="myimg"/></div>	// 拖拽元素
	<div id="d2"></div>		// 目标区域
	<script>
		var ele1 = document.getElementById("myimg");
		var d1 = document.getElementById("d1");
		var d2  = document.getElementById("d2");
		ele1.ondragstart = function(e){
			var mysrc = ele1.src;
			e.dataTransfer.setData("src",mysrc);		// setData()	设置数据
		}
		d2.ondragover = function(e){
			e.preventDefault();							// preventDefault()	阻止默认行为
		}
		d2.ondrop = function(e){
			var mysrc = e.dataTransfer.getData("src");	// getData()	获取数据
			var myimg = document.createElement("img");
			myimg.src = mysrc;
			myimg.width = "218";
			d2.appendChild(myimg);
			
			/* clearData()	清除当前设置的数据
			 *		e.dataTransfer.clearData("src");			
			 *		d1.removeChild(ele1)
			 */
		}
	</script>

~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~