HTML5 拖拽换位(drag & drop)

最新推荐文章于 2024-09-14 11:24:26 发布

置顶 haogemr

最新推荐文章于 2024-09-14 11:24:26 发布

阅读量1.4k

点赞数 2

分类专栏：前端转载

本文链接：https://blog.csdn.net/document_dom/article/details/108273059

版权

前端同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

转载

19 篇文章 0 订阅

订阅专栏

参考文章：
HTML5原生拖拽/拖放(drag & drop)详解
 原生JS快速实现拖放（drag and drop）效果

draggable属性

在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。
图片和链接按住鼠标左键选中，就可以拖放。
文本只有在被选中的情况下才能拖放。

<div draggable="true" id="div"></div>

draggable 属性有三个值：

true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动

在元素拖动过程中，有以下几种原生事件：

被拖动的元素：
dragstart ：在元素开始被拖动时候触发
drag：在元素被拖动时反复触发
dragend ：在拖动操作完成时触发
目的地对象：
dragenter ：当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover ：当被拖动元素在目的地元素内时触发
dragleave ：当被拖动元素没有放下就离开目的地元素时触发

drop ：当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

注意
dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

拖拽换位例子

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	  <title>拖拽换位</title>
	  <style type="text/css">
		.div1,
		.div2,
		.div3 {
			float: left;
			width: 100px;
			margin: 10px;
			height: 100px;
			border: 1px solid #ccc;
			margin: 0 50px;
		}

		.div {
			height: 100%;
		}

		p {
			font-size: 20px;
			margin: 0;
		}

		.dragging {
			border: 3px solid blue !important;
		}

		.drag-over {
			border: 3px dashed purple !important;
		}
	</style>
</head>

<body>
	<div class="div1" ondrop="drop(event,this)" ondragover="dragover(event,this)" draggable="true"
		ondragstart="dragstart(this)" ondragend="dragend(this)" ondragleave="dragleave(this)">
		<div class="div" style="background-color:#ff6a00;">
			<p class="title">我是第一！</p>
		</div>
	</div>
	<div class="div2" ondrop="drop(event,this)" ondragover="dragover(event,this)" draggable="true"
		ondragstart="dragstart(this)" ondragend="dragend(this)" ondragleave="dragleave(this)">
		<div class="div" style="background-color:#00ff21;">
			<p class="title">我是第二！</p>
		</div>
	</div>
	<div class="div3" ondrop="drop(event,this)" ondragover="dragover(event,this)" draggable="true"
		ondragstart="dragstart(this)" ondragend="dragend(this)" ondragleave="dragleave(this)">
		<div class="div" style="background-color:red;">
			<p class="title">我是第三！</p>
		</div>
	</div>
</body>

<script>
	var startDiv = null; //储存拖拽的元素
	var temp = null;
	//给子元素动态绑定事件
	document.querySelectorAll('.title').forEach(function (item, index) {
		item.onclick = function () {
			console.log(index);
		}
	})
	//在元素开始被拖动时候触发
	function dragstart(dom) {
		startDiv = dom;
		startDiv.classList.add('dragging');
	}
	//在拖动操作完成时触发
	function dragend(dom) {
		dom.classList.remove('dragging');
	}
	//当被拖动元素在目的地元素内时触发
	function dragover(e, dom) {
		e.preventDefault();
		if (dom !== startDiv) {
			dom.classList.add('drag-over');
		}
	}
	//当被拖动元素没有放下就离开目的地元素时触发
	function dragleave(dom) {
		dom.classList.remove('drag-over');
	}
	//当拖动完后,释放元素触发
	//如果子元素没有动态绑定的事件可用innerHTML方法，此方法会使动态绑定的事件不生效
	// function drop(e, dom) {
	// 	startDiv.classList.remove('dragging');
	// 	dom.classList.remove('drag-over');
	// 	if (startDiv !== dom) {
	// 		temp = startDiv.innerHTML;
	// 		startDiv.innerHTML = dom.innerHTML;
	// 		dom.innerHTML = temp;
	// 	}
	// }
	//如果子元素有动态绑定的事件可用下边方法
	function drop(e, dom) {
		startDiv.classList.remove('dragging');
		dom.classList.remove('drag-over');
		if (startDiv !== dom) {
			var startLen = startDiv.children.length;
			var endLen = dom.children.length;
			for (; startLen--;) {
				dom.appendChild(startDiv.children[0]);
			}
			for (; endLen--;) {
				startDiv.appendChild(dom.children[0]);
			}
		}
	}
</script>

</html>