1、把方块拖拽进方格中

  1. <style>
  2.     *{
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     .box1{
  7.         position: absolute;
  8.         width: 150px;
  9.         height: auto;
  10.         border: 1px solid ;
  11.         padding-bottom: 10px;
  12.     }
  13.     .box2{
  14.         position: absolute;
  15.         left: 300px;
  16.         width: 150px;
  17.         height: auto;
  18.         border: 1px solid ;
  19.         padding-bottom: 10px;
  20.     }
  21.     li{
  22.         position: relative;
  23.         width: 100px;
  24.         height: 30px;
  25.         background: #abcdef;
  26.         margin: 10px auto 0px auto; /* 上右下左 */
  27.         list-style: none;
  29.     }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="box1">
  34.    <ul>
  35.        <li></li>
  36.        <li></li>
  37.        <li></li>
  38.    </ul>
  39. </div>
  40. <div class="box2"></div>
  42. <script>
  43.    var dragDom;
  44.    var liList = document.getElementsByTagName('li');
  45.    for(var i = 0; i< liList.length;i++) {
  46.     liList[i].setAttribute('draggable',true);
  47.     liList[i].ondragstart = function(e) {
  48.         console.log(e.target);
  49.         dragDom = e.target;
  50.     }
  51.    }
  52.    var box2 = document.getElementsByClassName("box2")[0];
  53.    box2.ondragover = function(e) {
  54.        e.preventDefault();
  55.    }
  57.    box2.ondrop = function(e){
  58.        box2.appendChild(dragDom);
  59.        dragDom = null;
  60.     //    ondrop：在一个拖动过程中，释放鼠标键时触发此事件
  61.     //    ondragleave：当被鼠标拖动的对象离开其容器范围内时触发此事件
  62.    }
  63. </script>
  64. </body>