前端培訓-中級階段（19）- 拖拽API（2019-10-03期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

其實在之前就寫過一篇拖拽相關的內容。今天簡單說說吧。拖拽想要實現分爲兩種形式：

1. 模擬實現

2. drag API 實現

   1. M 端表現
   2. pc 端表現

模擬實現拖拽

實現方案

1. 鼠標按下的時候記錄按下的DOM。（如果有需要會進行查詢父級）
2. 鼠標移動時，根據鼠標位置修改DOM的位置。（如果要求原位置不變，可以clone一個新的）
3. 鼠標擡起的時候判斷父級不同則移入。（如果有需要會進行查詢父級，如果是同級的標籤可以做排序操作，目前代碼中是追加）

測試地址

實現代碼

var drapDOM = null;
window.addEventListener('mousedown', function(e){
    if(e.target.classList.contains('drap')){
        drapDOM = e.target;
    }
})
window.addEventListener('mousemove', function(e){
    if(drapDOM){
        drapDOM.style.position = 'fixed';
        drapDOM.style.pointerEvents =  'none';
        drapDOM.style.left = e.clientX + 'px'
        drapDOM.style.top = e.clientY + 'px'
        console.log(e)
    }
})
window.addEventListener('mouseup', function(e){
    console.log(e.target)
    if(drapDOM){
        drapDOM.style.position = 'initial';
        drapDOM.style.pointerEvents =  'initial';
        drapDOM.style.left = '0'
        drapDOM.style.top = '0';
        if(drapDOM.parentNode != e.target){
            e.target.appendChild(drapDOM)
        }
        drapDOM = null
    }
})

注意事項

1. drapDOM.style.pointerEvents = 'none' 防止副本干擾e.target
2. 可以拖拽的DOM
3. 可以放置的DOM

drag API 實現

先說說有什麼好處

1. 可以自動生成副本樣式

2. 動作週期的事件，可以方便的區分出（目標對象與源對象）

   1. ondragstart:源對象開始被拖動
   2. ondrag:源對象被拖動的過程中
   3. ondragend:源對象被拖動結束
   4. ondragenter:目標對象被源對象拖動進入
   5. ondragover:目標對象被源對象懸浮在上面
   6. ondragleave:源對象拖動着離開了目標對象
   7. ondrop:源對象拖動着在目標對象上方鬆手

3. 數據傳遞：

   1. 源對象數據保存：e.data.Transfer.setData(k,v)//k-v必須都是string類型
   2. 目標對象獲取數據：e.data.Transfer.getData(k,v)

實現方案

測試地址

1. 可拖拽點增加屬性（ draggable="true"）
2. 可拖拽點增加監聽函數 dragstart 記錄當前拖拽點
3. 放置點增加監聽函數 drop、dragover 阻止默認事件，防止（打開、不能拖拽）
4. 放置點增加監聽函數 drop 判斷如果拖拽點不在放置點內（if(!$(ev.target).find(dragged).length){）就追加

實現代碼

var dragged;
function allowDrop(ev){
    // console.log('allowDrop', ev)
    ev.preventDefault();
}

function drag(ev){
    // console.log('drag', ev)
}

function drop(ev){
    console.log('drop', ev)
    ev.preventDefault();
    if(!$(ev.target).find(dragged).length){
        $(ev.target).append(dragged)
    }

}

function dragstart(ev){
    dragged = ev.target;
}
$(function(){
    $('ul').off().on('drop', drop).on('dragover', allowDrop)
    $('li[draggable="true"]').off().on('drag', drag).on('dragstart', dragstart)
})

注意事項

1. 放置點增加監聽函數 drop、dragover 阻止默認事件，防止（打開、不能拖拽）
2. draggable="true" 用來標識這是一個可拖拽點。
3. M端 和 PC端 表現其實還不一樣的。比如M拖動會觸發滾動

其他方案&開源框架

1. jquery-ui
2. sortable.js

微信公衆號：前端linong