<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>drag</title>
<style>
div{height:50px;width:200px;background:red;margin-bottom:20px;}
</style>
</head>
<body>
<div id='11' draggable="true" ondrag="drag(event)">11111</div>
<div id='2222' draggable="true" ondrag="drag(event)">22222</div>
<div id='3333' draggable="true" ondrag="drag(event)">33333</div>
</body>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
document.getElementById('11').ondragover = function(ev) {
ev.preventDefault();
let divo = ev.target
divo.style.background = 'black'
};
document.getElementById('2222').ondragover = function(ev) {
ev.preventDefault();
let divo = ev.target
divo.style.background = 'black'
};
document.getElementById('11').ondragleave = function(ev) {
ev.preventDefault();
let divo = ev.target
divo.style.background = 'red'
};
document.getElementById('2222').ondragleave = function(ev) {
ev.preventDefault();
let divo = ev.target
divo.style.background = 'red'
};
document.getElementById('11').ondrop = function(ev){
ev.target.style.background = 'red'
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
alert('进入1')
}
document.getElementById('2222').ondrop = function(ev){
ev.target.style.background = 'red'
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
alert('进入2')
}
</script>
</html>