H5中的拖拽事件

　　最近浏览了张鑫旭大神的基于HTML5 drag/drop模块拖动插入排序删除完整实例，感觉受益匪浅。于是将最做的demo记录下来。

　　首先浏览一下事件，这些事件比较好记，只要记住用在谁的身上就好了，无非是被推拽的元素和目标元素。

　　　　被拖拽元素上触发的事件：

　　1.ondragstart - 用户开始拖动元素时触发

　　2.ondrag - 元素正在拖动时触发

　　3.ondragend - 用户完成元素拖动后触发

　　　　目标元素上触发的事件：

　　1.ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

　　2.ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

　　3.ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

　　4.ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

　　另外需要的知识点就是event对象中的preventDefault()。引用张大神的原话：在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

　　于是乎我照样子做了个小demo，很好理解。代码如下：

html:

<div class="left" id = 'trash'>垃圾箱</div>
    <div class="right">
        <ul>
            <li draggable = 'true'>1</li>
            <li draggable = 'true'>2</li>
            <li draggable = 'true'>3</li>
            <li draggable = 'true'>4</li>
        </ul>
    </div>

css:

.left{
            width: 100px;
            height: 400px;
            float: left;
            margin-left: 20px;
            margin-top: 20px;
            background: #ccc;
            font-size: 100px;
            color: #fff;
        }
        .right{
            width: 200px;
            height: 400px;
            float: left;
            background: #fff;
            margin-top: 20px;
            cursor: move;
        }
        ul{
            margin:0;
            padding:0;
        }
        ul>li{
            height:80px;
            margin-bottom: 20px;
            text-align: center;
            list-style-type: none;
            background: #f90;
            line-height: 80px;
        }

js

var arr_li = document.getElementsByTagName('li');
        var trash = document.getElementById('trash');
        var index = null;
        for(var i = 0; i < arr_li.length; i++){
            this.ondragstart = function(event){
                event.dataTransfer.getData('text',event.target.innerHTML);
                trash.style.color = 'red';
                trash.innerHTML = '删除';
                index = event.target;
                this.style.cursor = 'move';
            }
            this.ondragend = function(event){
                trash.style.color = '#fff';
                trash.innerHTML = '垃圾箱';
            }
        }
        trash.ondragover = function(event){
            event.preventDefault();
        }
        trash.ondragenter = function(event){
            this.style.color = 'blue';
        }
        trash.ondragleave = function(event){
            this.style.color = 'red';
        }
        trash.ondrop = function(event){
            event.preventDefault();
            this.style.color = "#fff";
            this.innerHTML = '垃圾箱';
            index.parentNode.removeChild(index);
        }

简单的效果图如下：