拖拽进入某个容器

87 阅读1分钟
<!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) {
        //防止ondrop不生效,ev.preventDefault()
        ev.preventDefault();
        let divo = ev.target
        divo.style.background = 'black'
    };
    document.getElementById('2222').ondragover = function(ev) {
        //防止ondrop不生效,ev.preventDefault()
        ev.preventDefault();
        let divo = ev.target
        divo.style.background = 'black'
    };
    //拖拽对象滑出容器外
    document.getElementById('11').ondragleave = function(ev) {
        //防止ondrop不生效,ev.preventDefault()
        ev.preventDefault();
        let divo = ev.target
        divo.style.background = 'red'
    };
    document.getElementById('2222').ondragleave = function(ev) {
        //防止ondrop不生效,ev.preventDefault()
        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");
        // ev.target.appendChild(document.getElementById(data));
        alert('进入1')
    }
    document.getElementById('2222').ondrop = function(ev){
        ev.target.style.background = 'red'
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        alert('进入2')
        // ev.target.appendChild(document.getElementById(data));
    }

</script>
</html>