html5作业1 drag移动

一定要记住,想要触发 drop 事件,就必须 让dragover默认事件消除

html

    <ul>
        <li class="item" mark="item1" draggable="true">001</li>
        <li class="item" mark="item2" draggable="true">002</li>
        <li class="item" mark="item3" draggable="true">003</li>
        <li class="item" mark="item4" draggable="true">004</li>
        <li class="item" mark="item5" draggable="true">005</li>
        <li class="item" mark="item6" draggable="true">006</li>
        <li class="item" mark="item7" draggable="true">007</li>
        <li class="item" mark="item8" draggable="true">008</li>
    </ul>
    
    <div class="wrapper" ></div>

js

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(".item").each(function (index) {
        this.ondragstart = function (e) {
          console.log($(this).attr("mark"));
            e.dataTransfer.setData("mark",$(this).attr("mark"));
        }
      })
      $(".wrapper")[0].ondragover = function (e) {
        e.preventDefault();
      }
      
      $(".wrapper")[0].ondrop = function (e) {
        var mark = e.dataTransfer.getData("mark");
        $("[mark="+mark+"]").appendTo($(this));
      }
      
      
    </script>

scss

@import "new_file.scss";

.item{
    @include base-size(100px,100px,red);
    text-align: center;
    line-height: 100px;
}
.wrapper,.box{
    @include base-size(400px,auto,blue);
    min-height: 400px;
    position: absolute;
    right: 0px;
    top: 300px;
    .item{
        float: left;
    }
}