用 JavaScript 实现元素的自定义拖拽

要点内容： JS元素拖拽
开发日期：2019-12-09

一、拖拽

可拖拽属性：draggable = “true”;　
　　默认可拖拽元素： 　
　　兼容性：Chrome safair 正常使用, Firefox 部分版本可用

二、拖拽的生命周期

1. 拖拽开始 　ondragstart
2. 拖拽进行中　ondrag
3. 拖拽结束 　ondragend

三、拖拽的组成

1.被拖拽的物体
　　ondragstart ondrag ondragend
2. 目标区域
　　ondragenter ondragover ondragleave ondrop

四、元素拖拽（被拖拽的物体）

（1）效果展示

（2）实现方式

	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("拖拽结束");
	}

五、目标元素事件（目标区域）

（1）效果展示

（2）实现方式

	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)
		*/	
	}

六、拖拽 dataTransfer

（1）效果展示一：未设置 clearData( )清除当前设置的数据

效果展示二：设置 clearData( )清除当前设置的数据
（2）实现方式

	初始化一个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 ~~~~~~~~~~~~~~~~~~~