原生拖放 drag

最新推荐文章于 2024-07-10 14:36:18 发布

buler_sky

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量270

点赞数

分类专栏：前端技术文章标签： drag html5

本文链接：https://blog.csdn.net/buler_sky/article/details/99705980

版权

前端技术专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、知识点

拖动元素依次触发事件：dragstart,drag,dragend
       放置元素依次触发事件：dragenter,dragover,dragleave或者drop
       a、默认图像文本和链接是可拖动的,其他元素若想可拖动需设置draggable="true"；
         b、因为大部分元素默认是不可放置的，若想放置需要重写dragenter,dragover阻止默认事件；
       c、dataTransfer:在拖动过程存储数据；在dragstart中调用setData(key,value)，在drop中getData（key）；
setDragImage可设置显示在光标下方的元素,默认是拖动的元素；
       d、dropEffect和effectAllowed可以设置拖动的元素和做作为目标的元素做怎样的接收操作。

2、兼容性

ie中dataTransfer设置数据的key必须为'text',其他会报错
firefox中dataTransfer必须调用setData(key,value），不然拖动无法生效

2、代码

以下代码实现简单的拖放功能，若需要兼容ie，需判断浏览器为ie时，dataTransfer设置数据的key为'text'（dataTransfer.setData('text', e.target.id)）；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.flex {
				display: flex;
			}
			.left, .right {
				flex-grow: 1;
				border: 1px solid #808080;
			}
		</style>
	</head>
	<body>
		<div class="flex">
			<div class="left">
				<ul id="leftDrag">
					<li id=1  draggable="true">1</li>
					<li id=2 draggable="true">2</li>
				</ul>
			</div>
			<div class="right">
				<ul id="righttDrag">
					<li id=3 draggable="true">3</li>
					<li id=4 draggable="true">4</li>
				</ul>
			</div>
		</div>
	</body>
	<script>
		let left = document.getElementById('leftDrag')
		let right = document.getElementById('righttDrag')
		function perventDefault(e){
			e.preventDefault();
		}
		function dragstart(e){
			e.dataTransfer.setData('ele', e.target.id)
			//e.dataTransfer.effectAllowed = 'move' //可设置多种值
			//e.dataTransfer.setDragImage(document.getElementById('1'), 20, 20)
		}
		function dragenter(e){
			e.preventDefault();
			//e.dataTransfer.dropEffect = 'move' //可设置多种值
		}
		function drop(e){
			let ele = e.dataTransfer.getData('ele')
			e.target.parentElement.appendChild(document.getElementById(ele))
		}
		//从右向左移
		right.addEventListener('dragstart', dragstart)
		left.addEventListener( "dragenter", dragenter)
		left.addEventListener( "dragover", perventDefault)
		left.addEventListener('drop', drop)
		//从左向右移
		left.addEventListener('dragstart', dragstart)
		right.addEventListener( "dragenter", dragenter)
		right.addEventListener( "dragover", perventDefault)
		right.addEventListener('drop', drop)
	</script>
</html>