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>