拖拽效果，拖拽排序，拖拽删除及外部图片拖拽插入页面

本文详细讲解如何实现拖拽效果，包括拖拽排序、拖拽删除功能，并介绍如何支持从外部拖拽图片并插入到页面中，提供了一种提升用户体验的交互设计方案。

<head>
	<meta charset="utf-8">
	<title>拖拽</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		ul {
			display: flex;
			list-style: none;
			width: 600px;
			margin: 40px auto;
			justify-content: space-around;
			flex-wrap: wrap;
			border: 1px solid;
		}
		
		li {
			width: 110px;
			height: 80px;
			background: red;
			margin: 10px;
			text-align: center;
			padding-top: 30px;
		}
		
		#ljt {
			background: gold;
			width: 150px;
			height: 200px;
			text-align: center;
			margin: 0 auto;
		}
		#xk{
			width: 800px;
			height: 600px;
			margin: 10px auto;
			border: 1px solid pink;
		}
	</style>
</head>

<body>
	<ul>
		<li draggable="true">A</li>
		<li draggable="true">C</li>
		<li draggable="true">E</li>
		<li draggable="true">B</li>
		<li draggable="true">K</li>
		<li draggable="true">I</li>
		<li draggable="true">N</li>
		<li draggable="true">G</li>
	</ul>
	<div id="ljt">
		垃圾桶
	</div>
	<div id="xk">
		
	</div>
	<script>
		var lis = document.getElementsByTagName("li")
		var u = document.getElementsByTagName("ul")[0]
		var ljt = document.getElementById("ljt")
		var tgt
		var qc
		var x = function(ev) {
			let e = window.event || ev
			qc = e.target
		}
		var y = function(ev) {
			let e = window.event || ev
			//					console.log(e.target) 
			tgt = e.target
			console.log(e.target.previousElementSibling== qc)
			console.log(123)
			if(tgt.previousElementSibling == qc) {
				u.insertBefore(e.target, qc)
				console.log(1)
			} else {
				u.insertBefore(qc, e.target)
			}

		}
		for(let i = 0; i < lis.length; i++) {
			lis[i].ondragover = function(ev) {
				let e = window.event || ev
				e.preventDefault()
				//					u.insertBefore(x,e.target)
			}
			lis[i].ondrop = y
			lis[i].ondrag = x
		}
	//元素拖动插入之间元素





		ljt.ondragover = function(ev) {
			let e = window.event || ev
			e.preventDefault()
		}
		ljt.ondrop = function(ev) {
			let e = window.event || ev
			console.log(1234)
			tgt = e.target
			qc.style.display = "none"
			console.log(1)
		}

		//元素拖动区域删除
		
		var xkuan = document.getElementById("xk")
		xkuan.ondragover=function(ev){
			let e = window.event || ev
			e.preventDefault()
		}
		xkuan.ondrop=function(ev){
			let e = window.event || ev
			e.preventDefault()
			let img =e.dataTransfer.files[0]
			let read=new FileReader()
			read.readAsDataURL(img)
			read.onload=function(ev){
				let e = window.event || ev
				console.log(this)
				let u=e.target.result
				let imgs=document.createElement("img")
				imgs.src=u
				imgs.style.width="50px"
				xkuan.appendChild(imgs)
				
				
			}
		}
		//外部图片拖动插入页面
	</script>
</body>