drop&drug 学习：拼图demo_drug 和 drop html-CSDN博客

本文链接：https://blog.csdn.net/yz764127031/article/details/62216804

截图
拼图前
这里写图片描述
拼图后

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drag&amp;drop</title>
    <style>
        div {
            position: absolute;
        }
        #source1 {
            width: 115px;
            height: 189px;
            background:url(/images/pic3.png);
        }
        #source2 {
            width: 123px;
            height: 167px;
            background: url(/images/pic1.png);
            left: 200px;
        }
        #source3 {
            width: 136px;
            height: 146px;
            background:url(/images/pic4.png);
            top:200px;
        }
        #source4 {
            width: 100px;
            height: 167px;
            background: url(/images/pic2.png);
            top: 200px;
            left: 200px
        }
        #target {
            width: 200px;
            height: 298px;
            background-color: #ccc;
            left: 500px;
        }
        #target1 {
            width: 200px;
            height: 298px;
            background: url(/images/pic.jpg);
            left: 800px;
        }
    </style>
</head>
<body>
    <div id="source1" draggable="true"></div>
    <div id="source2" draggable="true"></div>
    <div id="source3" draggable="true"></div>
    <div id="source4" draggable="true"></div>
    <div id="target"></div>
    <div id="target1"></div>
    <script src="test1.js"></script>
</body>
</html>

window.onload = function() {
    var source1 = document.getElementById("source1");
    var source2 = document.getElementById("source2");
    var source3 = document.getElementById("source3");
    var source4 = document.getElementById("source4");
    var target = document.getElementById("target");


    source1.ondragstart = function(e) {
        e.dataTransfer.setData("text/plain", e.target.id);


    };
    source2.ondragstart = function(e) {
        e.dataTransfer.setData("text/plain", e.target.id);
    };
    source3.ondragstart = function(e) {
        e.dataTransfer.setData("text/plain", e.target.id);


    };
    source4.ondragstart = function(e) {
        e.dataTransfer.setData("text/plain", e.target.id);
    };
    target.ondragover = function(e) {
        e.preventDefault();
    };
    target.ondrop = function(e) {
        e.preventDefault();
        var id = e.dataTransfer.getData("text");
        if(id=="source2")
        {
            document.getElementById(id).style.left = "77px";
        }
        if(id=="source3")
        {
            document.getElementById(id).style.top = "152px";
        }
        if(id=="source4")
        {
            document.getElementById(id).style.top = "131px";
            document.getElementById(id).style.left = "100px";
        }
        target.appendChild(document.getElementById(id));
    };
};