html-drag

by slacr_

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html-drag&drop</title>
    <style>
        .box {
            width: 110px;
            padding: 5px;
            height: 200px;
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
    </style>
</head>

<body>
    <p>试着将图片拖至方框内</p>
    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="pic1" src="https://img0.baidu.com/it/u=570534185,2137476261&fm=253&fmt=auto?w=123&h=161" alt="无法显示"
        width="100" ondragstart="drag(event)" draggable="true" />
</body>
<script>
    function allowDrop(e) {
        e.preventDefault()
    }
    function drag(e) {
        e.dataTransfer.setData("pic1", e.target.id)
    }
    function drop(e) {
        e.preventDefault()
        var data = e.dataTransfer.getData("pic1")
        e.target.appendChild(document.getElementById(data))
    }
</script>

</html>