3.html5作业1 drag移动

1
2
3
4
5
6
7
8
9
10
11
12
    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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;
    }
}