Drag - JackHu88/Comm GitHub Wiki

Drag File

https://www.helloweba.com/view-blog-192.html

Drag Element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 drag &amp; drop 拖拽与拖放测试</title>
<style>
body{font-size:84%;}
.dragbox{width:500px; padding-left:20px; float:left;min-height: 200px;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;width:500px;}
</style>
</head>

<body>
<div class="dragbox" style="border:2px dashed #ccc">

</div>
<div class="dragbox">
	<div class="draglist" title="拖拽我" draggable="true">列表1</div>
    <div class="draglist" title="拖拽我" draggable="true">列表2</div>
    <div class="draglist" title="拖拽我" draggable="true">列表3</div>
    <div class="draglist" title="拖拽我" draggable="true">列表4</div>
    <div class="draglist" title="拖拽我" draggable="true">列表5</div>
    <div class="draglist" title="拖拽我" draggable="true">列表6</div>
</div>
<div class="dragremind"></div>
<script>
var $ = function(selector) {
	if (!selector) { return []; }
	var arrEle = [];
	if (document.querySelectorAll) {
		arrEle = document.querySelectorAll(selector);
	} else {
		var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
		if (lAll) {
			var i = 0;
			for (i; i<lAll; i+=1) {
				if (/^\./.test(selector)) {
					if (oAll[i].className === selector.replace(".", "")) {
						arrEle.push(oAll[i]);
					}
				} else if(/^#/.test(selector)) {
					if (oAll[i].id === selector.replace("#", "")) {
						arrEle.push(oAll[i]);
					}
				}
			}
		}
	}
	return arrEle;
};

var eleDustbin = $(".dragbox"), eleDrags = $(".draglist"), lDrags = eleDrags.length, 
eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
	eleDrags[i].onselectstart = function() {
		return false;
	};
	eleDrags[i].ondragstart = function(ev) {
		ev.dataTransfer.effectAllowed = "move";
		ev.dataTransfer.setData("text", ev.target.innerHTML);
		//ev.dataTransfer.setDragImage(ev.target, 0, 0);
		eleDrag = ev.target;
		return true;
	};
	eleDrags[i].ondragend = function(ev) {
		ev.dataTransfer.clearData("text");
		eleDrag = null;
		return false
	};
}
for (var i=0; i<eleDustbin.length; i+=1) {
	eleDustbin[i].ondragover = function(ev) {
		ev.preventDefault();
		return true;
	};
	
	eleDustbin[i].ondragenter = function(ev) {
		//this.style.color = "#ffffff";
		this.style.border = "1px #000000 dashed";
		return true;
	};
	eleDustbin[i].ondrop = function(ev) {
		if (eleDrag) {
			eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
			eleDrag.parentNode.removeChild(eleDrag);
			this.appendChild(eleDrag);
		}
		//this.style.color = "#000000";
		this.style.border = "1px #fff dashed";
		return false;
	};
}
</script>

</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️