HTML5 : Drag & Drop

Drag & Drop

Drag & Drop是HTML5中的拖放，即抓取物件後拖放到指定的位置。

設定元素為可拖放draggable

<div class="drag" draggable="true"></div>
<div class="wrapper"></div>
複製程式碼

事件

dragstart dragend dragenter dragover drop

var oDrag = document.getElementsByClassName('drag')[0],
    oWrapper = document.getElementsByClassName('wrapper')[0];
//當【元素】被抓取時
oDrag.addEventListener('dragstart',function(){
    console.log('dragstart');
})
//當【元素】被放開時
oDrag.addEventListener('dragend',function(){
    console.log('dragend');
})
//當滑鼠進入【放置框】內（由滑鼠位置決定）
oWrapper.addEventListener('dragenter',function(){
    console.log('dragenter');
    
})
//當元素在【放置框】上方移動時
oWrapper.addEventListener('dragover',function(e){
    //觸發 drop 事件必須先在 dragover 裡面取消預設事件
    e.preventDefault();
    console.log('dragover');
})
//當元素被拖入【放置框】內時
oWrapper.addEventListener('drop',function(e){
    //避免將檔案拖入時，檔案做為連結開啟了
    e.preventDefault();
    console.log('drop');
})
//dragstart
//dragenter
//dragover
//drop
//dragend
複製程式碼

設定資料 e.dataTransfer.setData()

1.實戰---將【1】和【2】放到【放置框】內

<div id="drag1" draggable="true">1</div>
<div id="drag2" draggable="true">2</div>
<div class="wrapper">放置框</div>
複製程式碼

<script>
var oDrag1 = document.getElementById('drag1'),
    oDrag2 = document.getElementById('drag2'), 
    oWrapper = document.getElementsByClassName('wrapper')[0];
var child = oWrapper.childNodes;

oDrag1.addEventListener('dragstart',function(e){
    //設定 資料
    e.dataTransfer.setData('data',this.id);
})
oDrag2.addEventListener('dragstart',function(e){
    e.dataTransfer.setData('data',this.id);
})

oWrapper.addEventListener('dragenter',function(){
    //刪除文字節點'放置框'
    for(var i = 0; i < child.length; i ++){
        if(child[i].nodeType === 3){
            console.log(child[i]);
            oWrapper.removeChild(child[i])
        }
    } 
})

oWrapper.addEventListener('dragover',function(e){
    //觸發 drop 事件必須先在 dragover 裡面取消預設事件
    e.preventDefault();   
})

oWrapper.addEventListener('drop',function(e){
    // console.log(e.dataTransfer);
    //獲取 資料
    var data = e.dataTransfer.getData('data');
    oWrapper.appendChild(document.getElementById(data));
})
複製程式碼

2.實戰---拖住排序加拖拽刪除

<div class="wrapper">
    <ul>
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
        <li draggable="true">4</li>
        <li draggable="true">5</li>
    </ul>
    <div class="box">垃圾桶</div>
</div>
複製程式碼

var oUl = document.getElementsByTagName('ul')[0],
    oBox = document.getElementsByClassName('box')[0],
    oLi = document.getElementsByTagName('li'),
    len = oLi.length;
    
function bindLiEvent(){
    for(var i = 0; i < len; i ++){
        oLi[i].addEventListener('dragstart',function(e){
            var index = getIndex(this);
            e.dataTransfer.setData('data', index);
        });
        oLi[i].addEventListener('dragover',function(e){
            e.preventDefault();
        });
        oLi[i].addEventListener('drop',function(e){
            var i = e.dataTransfer.getData('data');
            oUl.insertBefore(oLi[i], this);
        });
    }
}
//獲取列表最新的索引值
function getIndex(dom){
    for(var i = 0; i < len; i ++){
        if(oLi[i] === dom){                    
            return i;
        }
    }
    
}
function removeLi(){
    oBox.addEventListener('dragover',function(e){
        e.preventDefault();
    })
    oBox.addEventListener('drop',function(e){
        e.preventDefault();
        var index = e.dataTransfer.getData('data');
        oLi[index].remove();
    })
}
bindLiEvent();
removeLi ();
複製程式碼