<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1,#div2,#div3 {width:350px;height:30px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<ul>
<li id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></li>
<li id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></li>
<li id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></li>
</ul>
<br>
<div class="drag1">
<div id="drag1" class="drag" draggable="true" ondragstart="drag(event)">A选项哎aaaaAAAAAAAAAA</div>
</div>
<div class="drag2">
<div id="drag2" class="drag" draggable="true" ondragstart="drag(event)">B选项哎aaaaAAAAAAAAAA</div>
</div>
<div class="drag3">
<div id="drag3" class="drag" draggable="true" ondragstart="drag(event)">C选项哎aaaaAAAAAAAAAA</div>
</div>
<div class="drag4">
<div id="drag4" class="drag" draggable="true" ondragstart="drag(event)">D选项哎aaaaAAAAAAAAAA</div>
</div>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
console.log('drag',ev)
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
if (ev.target.innerHTML) {
return false
}
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
// var allClick = document.getElementById("drag1");
var draglist = document.querySelectorAll('.drag')
for(let i=0;i<draglist.length;i++){
// JS监听
draglist[i].addEventListener('click',function(){
const copy = draglist[i].getAttribute('id')
console.log(document.getElementsByClassName(copy))
document.getElementsByClassName(String(copy))[0].appendChild(draglist[i])
})
}
</script>
</body>
</html>```