html5的拖拽

作者: Ben大师 | 来源:发表于2019-10-17 22:41 被阅读0次

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width:200px;
            height:200px;
            background: pink;
        }
        .target1{
            width:100px;
            height:100px;
            background: #398439;
        }
    </style>
</head>
<body>
<div id="container" class="container"></div>
<div id="target1" class="target1" draggable="true"></div>

<script>
    document.getElementById("target1").ondragstart=function (e) {
        e.dataTransfer.setData("text/plain",e.target.id);
    };
    document.getElementById("container").ondrop = function (e) {
        var data = e.dataTransfer.getData("text/plain");
        //console.log(data);
        e.target.appendChild(document.getElementById(data));
    }
    document.getElementById("container").ondragover = function (e) {
        e.preventDefault();
    }
</script>
</body>
</html>

最终效果：

GIF.gif