<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Example</title>
<style>
.content{
width: 200px;
height: 200px;
border:1px solid red;
}
.item{
width:100px;
height: 100px;
border:1px solid red
}
.hello{
width: 150px;
height: 150px;
border: 1px solid red;
}
.drop-over{
background-color: blue;
}
</style>
</head>
data-drop="copy"表示可以接受元素copy
<div class="container">
<div draggable="true" data-effect='move' class="item">one</div>
<div draggable="true" data-effect='move' class="item">two</div>
<div draggable="true" data-effect='move' class="item">three</div>
<div style="display: flex;">
<div class="hello" data-drop="copy">copy</div>
<div class="hello" data-drop="copy">copy</div>
<div class="hello" data-drop="move" >move</div>
<div class="hello" data-drop="move">move</div>
</div>
</div>
<div draggable="true">draggable</div>
<script>
const container=document.querySelector('.container')
let source
container.ondragstart=(e)=>{//这个表示开始拖拽
// e.preventDefault()
source=e.target//当前的目标元素
// e.dataTransfer.effectAllowed='move' //表示 移动
e.dataTransfer.effectAllowed=e.target.dataset.effect;
}
container.ondragover=function(e){
e.preventDefault()
// console.log('over',e.target)
}
function clearDropOver(){
let node= document.querySelectorAll('.drop-over')
node.forEach(node=>{
node.classList.remove('drop-over')
})
}
//找到有data-drop的节点
function getDropNode(node){
while(node){
if(node.dataset&& node.dataset.drop){
return node
}
node=node.parentNode
}
}
container.ondragenter=function(e){
clearDropOver()
//const dropNode=e.target
const dropNode=getDropNode(e.target)
if(dropNode && dropNode.dataset.drop==e.dataTransfer.effectAllowed){
//表示这个元素接受拖拽的节点
dropNode.classList.add('drop-over')
}
}
container.ondrop = function (e) {
clearDropOver()
//const dropNode=e.target
const dropNode = getDropNode(e.target) //找到那个可以接收的容器
if (dropNode && dropNode.dataset.drop == e.dataTransfer.effectAllowed) {
if(dropNode.dataset.drop=='move'){
dropNode.innerHTML=''
const clone=source.cloneNode(true)
clone.dataset.effect='copy'
dropNode.appendChild(clone)
}else{
source.remove()
}
}
}
</script>
<body>
