jy
/
flask-map


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
							<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        .one {

            width: 400px;

            height: 400px;

            border: 1px solid #000;

        }


        .one > div, .two > div {

            width: 98px;

            height: 98px;

            border: 1px solid #000;

            border-radius: 50%;

            background-color: red;

            float: left;

            text-align: center;

            line-height: 98px;

        }


        .two {

            width: 400px;

            height: 400px;

            border: 1px solid #000;

            position: absolute;

            left: 600px;

            top: 200px;

        }

    </style>
</head>
<body>
<div class="one">
    <div draggable="true">1</div>
    <div draggable="true">2</div>
    <div draggable="true">3</div>
    <div draggable="true">4</div>
    <div draggable="true">5</div>
    <div draggable="true">6</div>
    <div draggable="true">7</div>
    <div draggable="true">8</div>
</div>
<div class="two"></div>

<script>

    var boxs = document.querySelectorAll('.one div');

    //        临时的盒子 用于存放当前拖拽的元素


    var two = document.querySelector('.two');


    var temp = null;

    //         给8个小盒子分别绑定拖拽事件

    for (var i = 0; i < boxs.length; i++) {

        boxs[i].ondragstart = function () {

//                保持当前拖拽的元素

            temp = this;

            console.log(temp);

        }


        boxs[i].ondragend = function () {

//               当拖拽结束 ，清空temp

            temp = null;

            console.log(temp);

        }

    }


    //        目标元素的拖拽事件

    two.ondragover = function (e) {

//            阻止拖拽的默认行为

        e.preventDefault();

    }

    //        当在目标元素上松开鼠标是触发

    two.ondrop = function () {

//            将拖拽的元素追加到 two里面来

        this.appendChild(temp);

    }

</script>
</body>
</html>