html5的元素拖拽

今天学习了妙味课堂的课程：

在html5中有支持元素拖拽的一些属性和方法：

一些实例代码如下：

<div id="div1"></div>

    <ul>

        <li draggable="true"></li>

        <li draggable="true"></li>

        <li draggable="true"></li>

    </ul>

<script type="text/javascript">

window.onload = function(){

    var aLi = document.getElementsByTagName('li');

    var oDiv = document.getElementById('div1');

    for(var i=0;i<aLi.length;i++){

        aLi[i].ondragstart = function(ev){

            var ev = ev||window.event;

            ev.dataTransfer.setData('name','su');

            this.style.background = 'pink';

        };

        aLi[i].ondragend = function(){

            this.style.background = 'red';

        };

        aLi[i].ondrag = function(){//在拖动时，连续触发，它与mousemove的区别在于mousemove是必须动着的。

            document.title = i++;

        };

    }

    oDiv.ondragenter = function(){//类似于mouseover

        this.style.background = '#f2f2f2';

    };

    oDiv.ondragleave = function(){//类似于mouseout

        this.style.background = '#ccc';

    };

    oDiv.ondragover = function(ev){

        var ev = ev||window.event;

        // 要触发drop事件，就必须在dragover中阻止默认事件

        this.style.background = '#202020';

        this.style.cursor = 'pointer';

        ev.preventDefault();

        //return false;

    };

    oDiv.ondrop = function(ev){

        alert(ev.dataTransfer.getData('name'));

    };

}

</script>