javascript拖动事件

原创已于 2022-04-24 17:04:21 修改 · 351 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-22 17:28:02 首次发布

这是一个关于HTML5拖放事件的示例代码，展示了如何使用ondragstart、ondrag、ondragend、ondragenter、ondragover、ondragleave和ondrop事件创建一个简单的元素拖放功能。通过dataTransfer对象传递数据，并在drop事件中实现元素的移动。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	<div class="box" ondrop="drop(event)" ondragover="dragover(event)">
	   <p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">
	     日出江花红似火
	   </p>
	</div>
	<div class="box" ondrop="drop(event)" ondragover="dragover(event)"></div>
	<div class="box" ondrop="drop(event)" ondragover="dragover(event)"></div>
	<div class="box" ondrop="drop(event)" ondragover="dragover(event)"></div>
	<script>
		function drop(e) {
			e.preventDefault()
			var data = e.dataTransfer.getData("Text");
			e.target.appendChild(document.getElementById(data));
		}
		function dragover(e){
			event.preventDefault();
		}
		function dragStart(e){
			e.dataTransfer.setData("Text", event.target.id)
		}
		function dragging(e){
			console.log(e)
  		}
}
	</script>
</body>
</html>

在这里插入图片描述

事件	描述
ondrag	该事件在元素正在拖动时触发
ondragend	该事件在用户完成元素的拖动时触发
ondragleave	该事件在拖动元素离开放置目标时触发
ondragover	该事件在拖动元素在放置目标上时触发
ondragenter	该事件在拖动的元素进入放置目标时触发
ondragstart	该事件在用户开始拖动元素时触发
ondrop	该事件在拖动元素放置在目标区域时触发
draggable	属性规定元素是否可拖动