拖放API实现拖放排序

前言

<p id="source" draggable="true">a元素</p><p id="process">b元素</p><p id="target">c元素</p><script>
    var source = document.getElementById('source'),     // a元素
        process = document.getElementById('process'),   // b元素
        target = document.getElementById('target');     // c元素
    
    source.addEventListener('dragstart',function(ev){   // dragstart事件由a元素产生
        console.log('a元素开始被拖动');
    },false)    process.addEventListener('dragenter',function(ev){  // dragenter事件由b元素产生
        console.log('a元素开始进入b元素');
    },false)    process.addEventListener('dragleave',function(ev){  // dragleave事件由b元素产生
        console.log('a元素离开b元素');
    },false)    target.addEventListener('drop',function(ev){        // drop事件由c元素产生
        console.log('a元素拖放到c元素了');
        ev.preventDefault();
    },false)    document.ondragover = function(e){e.preventDefault();}</script> 

dataTransfer 对象

getData()

clearData()

setDragImage()

var source = document.getElementById('source'),
    icon = document.createElement('img');icon.src = 'img.png';source.addEventListener('dragstart',function(ev){
    ev.dataTransfer.setDragImage(icon,-10,-10)},false) 

effectAllowed 和 dropEffect 属性

var source = document.querySelectorAll('.list'),
    dragElement = null;for(var i = 0; i < source.length; i++){
    source[i].addEventListener('dragstart',function(ev){
        dragElement = this;
    },false);

    source[i].addEventListener('dragenter', function(ev){
        if(dragElement != this){
            this.parentNode.insertBefore(dragElement,this);
        }
    }, false)

    source[i].addEventListener('dragleave', function(ev){
        if(dragElement != this){
            if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
                this.parentNode.appendChild(dragElement);
            }
        }
    }, false)};document.ondragover = function(e){e.preventDefault();}document.ondrop = function(e){e.preventDefault();} 

更多文章：lin-xin/blog

以上就是拖放 API 实现拖放排序 的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于拖放API实现拖放排序的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did41006