<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.list {
1000px;
height: 300px;
background: #aaaa7f;
}
.content {
margin-top: 10px;
1000px;
height: 300px;
background: #ffaaff;
}
</style>
</head>
<body>
<!-- 待拖拽列表 -->
<div class="list">
<!-- draggable="true" 让目标可以拖拽 -->
<button id="btn" type="button" draggable="true">按钮</button>
</div>
<!-- 目标容器 -->
<div id="content" class="content">
</div>
<script type="text/javascript">
let btn = document.getElementById("btn");
let content = document.getElementById("content");
// ============= 以下是被拖拽目标的事件 =============
// 目标开始拖拽事件
btn.ondragstart = function (e) {
console.log("目标开始拖拽", e);
// e.dataTransfer是H5实现的一个可以在拖拽与被拖拽组件之间的“存储器”，实现组件间的数据传输
e.dataTransfer.setData("id", e.target.id)
}
// 目标开始拖拽中的事件
btn.ondrag = function (e) {
// console.log("目标拖拽的过程中",e);
}
// 目标拖拽结束的事件
btn.ondragend = function (e) {
console.log("目标拖拽结束", e)
}
// ============= 以下是拖拽到容器区域的事件 ============
content.ondragenter = function (e) {
console.log("检测到目标进入容器", e);
}
content.ondragover = function (e) {
// console.log("目标在容器上移动！",e);
// 阻止默认事件，否则ondrop会失效
e.preventDefault();
}
// 目标离开容器的事件
content.ondragleave = function (e) {
console.log("拖目标离开容器", e);
}
// 目标在容器内被释放的事件
content.ondrop = function (e) {
console.log("目标在容器区域释放", e.dataTransfer.getData("id"));
// cloneNode(true)为深克隆节点，创建一个新的节点放到容器里面，这样才不会影响源节点
let node = document.getElementById(e.dataTransfer.getData("id")).cloneNode(true);
// 做一些标识，表示这个这个确实生成的
node.setAttribute("id", "newBtn");
node.innerText = "新按钮";
// 这是释放之后对应的容器的信息，我们总要拿到一个容器放目标组件
let targetContent = document.getElementById(e.target.id);
targetContent.appendChild(node)
}
</script>
</body>
</html>
