火狐浏览器下的拖放事件兼容性-优快云博客

1.兼容火狐

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
/*拖放事件
解决火狐下的问题
必须设置dataTransfer对象才可以拖拽除图片外的其他标签

dataTransfer对象
setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value
*/
    window.onload = function() {
        var oUl = document.getElementsByTagName('ul')[0];
        var oLi = oUl.getElementsByTagName('li');
        var oDiv = document.getElementById('div1');
        var i = 0;
        for(var i = 0;i<oLi.length;i++){
            oLi[i].index = i;
            oLi[i].ondragstart = function(ev){
                var ev = ev || window.event;
                ev.dataTransfer.setData('name',this.index);
                this.style.background = 'green';
            }
        }
        oDiv.ondragend = function(){
            this.style.background = 'yellow';   
        }   
        oDiv.ondragenter = function(){
            this.style.background = 'blue';
        }
        oDiv.ondragover = function(ev) {

        //enter和leave之间连续触发
        //要想触发drop事件，就 必须在dragover当中阻止默认事件
        //document.title = i++;
            ev.preventDefault();
        }
        oDiv.ondragleave = function(){
            this.style.background = 'red';

        }
        oDiv.ondrop = function(ev){
            oUl.removeChild(oLi[ev.dataTransfer.getData('name')]);
            for(var i = 0; i<oLi.length; i++){
                oLi[i].index = i;
            }   
        }       

    }
</script>
</head>

<body>
    <ul>
        <li draggable="true">a</li>
        <li draggable="true">b</li>
        <li draggable="true">c</li>
    </ul>
    <div id="div1"></div>
</body>
</html>

HTML5笔记三：拖放