HTML5 : Drag & Drop

柒號發表於2019-02-25
HTML

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】放到【放置框】內

HTML5 : Drag & Drop
HTML5 : Drag & Drop

<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 ();
複製程式碼

相關文章