drag Api 拖拽用法示例

最新推荐文章于 2024-04-06 14:27:24 发布

_HtwoO

最新推荐文章于 2024-04-06 14:27:24 发布

阅读量222

点赞数

分类专栏： demo 文章标签： javascript

本文链接：https://blog.csdn.net/qq_30418537/article/details/117575240

版权

demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

drag

看了已到面试题才了解到有drag这么一个api, 今天简单的做了个示例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>drag Api 拖拽用法示例</title>
		<style type="text/css">
			#dropBox {
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: green;
				border: 1px solid antiquewhite;
			}

			#wrarry {
				position: absolute;
				top: 0;
				right: 0;
				width: 300px;
				height: 300px;
				background-color: red;
				border: 1px solid antiquewhite;
			}
		</style>
	</head>
	<body>
		<div id="dropBox" draggable="true">

		</div>

		<div id="wrarry">

		</div>
		<script type="text/javascript">
			dropBox.ondragstart = (event) => {
				console.log('dropBox开始拖动');
				event.dataTransfer.setData("Text", event.target.id);
			}
			dropBox.ondragend = (event) => {
				console.log('dropBox结束拖动');
			}
			wrarry.ondragenter = (event) => {
				event.preventDefault();
				console.log('进入wrarry触发');
			}
			wrarry.ondragover = (event) => {
				event.preventDefault();
				console.log('进入wrarry内部触发');
			}
			wrarry.ondragleave = (event) => {
				event.preventDefault();
				console.log('离开wrarry触发');
			}
			wrarry.ondrop = (event) => {
				event.preventDefault()
				var data = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(data));
			}
			document.documentElement.ondragover = (event)=>{
				event.preventDefault()
			}
			document.documentElement.ondrop = (event) => {
				event.preventDefault()
				var data = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(data));
			}
		</script>
	</body>
</html>

_HtwoO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
drag Api 拖拽用法示例

drag看了已到面试题才了解到有drag这么一个api, 今天简单的做了个示例<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont
复制链接

扫一扫

专栏目录