H5拖放API相关触发事件-CFANZ编程社区

H5拖放API相关触发事件_前端开发
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>H5拖放API相关触发事件</title>
    <style>
        body {
            text-align: center;
        }

        .half-opacity {
            opacity: 0.3
        }

        .full-opacity {
            opacity: 1;
        }
    </style>
</head>

<body>
    <h1>拖动的目标对象触发的事件</h1>
    <img id="trash" src="images/trash.png" class="half-opacity">
    <hr />
    <img src="images/p4.png">
    <script>
        // 源对象被拖动着进入目标对象
        trash.ondragenter = function () {
            console.log('drag enter')
            trash.className = "full-opacity"
        };
        // 源对象被拖动着悬停在目标对象上方
        trash.ondragover = function (e) {
            // dragover事件默认行为：必须触发dragleave
            // 阻止默认行为,使得drop可能触发
            e.preventDefault();
            console.log('drag over')
            trash.className = "full-opacity"
        };
        // 源对象被拖动着离开了目标对象
        trash.ondragleave = function () {
            console.log('drag leave')
            trash.className = "half-opacity"

        };
        // 源对象在目标对象上释放
        trash.ondrop = function () {
            console.log('drop')
            trash.className = "half-opacity"
        }
    </script>
</body>

</html>