H5 的 Draggable 属性

HTML5提供专门的拖拽与拖放的API,

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :< li draggable="true"> aaaa</li>  否则不会有效果

二、相关重点

  1. dataTransfer 对象:拖拽对象用来传递的媒介,使用一般为Event.dataTransfer。 在 event对象下
  2. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,
  3. //drag的顺序:
    1. ondragstart    事件:  当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素
    2. ondrag           事件: 在dangstart 和 dargend 之间发生的, 此事件作用在被拖曳元素
    3. ondragenter    事件: 拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
    4. ondragover     事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
    5. ondrop          事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
    6. ondragleave     事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上 (一般 有了 drop就没有dragleave 事件 )
    7. ondragend   事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
  4. Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
  5. event.dataTransfer.effectAllowed 属性:就是拖拽的效果,拖拽时光标的样式。
  6. evnet.dataTransfer.setDragImage(odiv,0,0);  拖拽时的影像 是 odiv ,鼠标指在odiv的 0,0处(左上角)

解决Firefox 浏览器下的问题:  

必须设置 dataTransfer 对象的setData方法 才能拖拽图片以外的其他标签

dataTransfer.setData() 方法 设置被拖数据的数据和值(key和 value)必须 是字符串,      dataTransfer.getData() 方法  根据 key 获取value的 值

下面是一个简单的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    li{
        height: 20px;
        width: 100px;
        background: #e3f;
        margin: 20px;
        list-style: none;
    }
 
    div{
        margin-top: 200px;
        width: 100px;
        height: 100px;
        background: red;
    }
    </style>
    <title>ni</title>
    <script type="text/javascript">
    window.onload = function(){
        var j = 0;
        var ul = document.getElementsByTagName("ul")[0];
        var lis = document.getElementsByTagName("li");
        var put = document.getElementById("put");
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
             
            lis[i].ondragstart  = function(ev){
                var ev = ev||window.evnet;
                ev.dataTransfer.setData("index",this.index);
                this.style.backgroundColor = "#9f9";
            }
 
            lis[i].ondrag = function(){
                this.style.backgroundColor = "#ff9";
            }
 
            lis[i].ondragend = function(){
                this.style.backgroundColor = "#931";
            }
 
        };
 
        put.ondragenter = function(){
            this.style.backgroundColor = "black";
        }
 
        put.ondragover = function(ev){
            ev.preventDefault();
            this.style.backgroundColor = "blue";       
        }
 
        put.ondragleave = function(){
            this.style.backgroundColor = "#931";       
        }
 
        put.ondrop = function(ev){
            var ev = ev || window.evnet;
            this.style.backgroundColor = "#999";           
            ev.target.appendChild(lis[ev.dataTransfer.getData("index")]);          
            //ul.removeChild(lis[ev.dataTransfer.getData("index")]);  加了这句话反而出问题,appendChild(e) 就是剪切的,当添加了子元素 e 后,会把原来的元素 e 给删除了
            for (var i = 0; i < lis.length; i++) {
                        lis[i].index = i;
                    };     
        }
    }
 
    </script>
</head>
<body>
    <ul>
        <li draggable="true">aaaaa</li>
        <li draggable="true">bbbbb</li>
        <li draggable="true">ccccc</li>
    </ul>
    <div id="put"></div>
</body>

  

  

 

posted @   暗夜幽狼  阅读(3221)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示