js 拖放元素

最新推荐文章于 2024-04-09 17:34:36 发布

大佬桑

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量86

点赞数

分类专栏：日常开发问题总结与反思文章标签： javascript html5 html

本文链接：https://blog.csdn.net/SSS01233210/article/details/120536251

版权

日常开发问题总结与反思专栏收录该内容

42 篇文章 1 订阅

订阅专栏

记录一个十分好用的js原生拖放效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>拖拽测试</title>
<style type="text/css">
#div1, #div2 {
  position: relative;
	float:left; 
	width:300px; 
	height:150px; 
	margin:10px;
	padding:10px;
	border:2px solid red;
}
#drag1{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>
<script>
function allowDrop(ev) {
	ev.preventDefault();
}
function drag(ev) {
	ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<div draggable="true" ondragstart="drag(event)" id="drag1" style="width: 200px;height: 100px; background-color: greenyellow;"></div>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
</body>
</html>
参考资料：菜鸟教程https://www.runoob.com/html/html5-draganddrop.html