html|拖放元素的实际案例🎁🎁图片设置可拖放 draggable="true" 图片设置开始拖放的函数ondrag

图片设置可拖放 draggable="true"
图片设置开始拖放的函数ondragstart="drag(event)" 在drag()函数中利用dataTransfer.setData设置被拖动元素的数据类型和值
目标div设置ondragover规定放到何处，设置ondrop完成放置

// 核心代码：
<body>
    <p>拖动图片到矩形框中:</p>
    <img loading="lazy" id="drag1" src="./e4.png" draggable="true" ondragstart="drag(event)">
    <div style="display: inline-block;" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <script>
        // ondragover放到何处
        function allowDrop(ev) {
            // 阻止事件的默认方式
            ev.preventDefault();
        }

        function drag(ev) {
            // dataTransfer.setData设置被拖动元素的数据类型和值
            ev.dataTransfer.setData("Text", ev.target.id);
        }
        // ondrop开始放置
        function drop(ev) {
            //阻止事件的默认行为
            ev.preventDefault();
            // 获取使用setData设置的数据类型的所有数据
            var data = ev.dataTransfer.getData("Text");
            // 将拖动的元素加到目标元素中
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</body>

效果展示：

image (3).png

image (4).png