實現一個美化原生拖拽的draggable-polyfill

拖拽的實現

在HTML5還未普及以前，實現元素的拖拽還算是一件比較麻煩的事，大概思路就是監聽鼠標移動相關事件，下面是僞代碼

oDiv.onmousedown = function(ev){
    //記錄起始位置
}
document.onmousemove = function(ev){
    //移動目標元素
}
document.onmouseup = function(ev){
    //取消鼠標移動事件
}

HTML5新增了拖放draggable標準，拖拽就變得簡單了，只須要經過監聽元素的拖放事件就能實現各類拖放功能。

<div draggable="true">drag me</div>

除了設置 draggable="true"屬性外，默認狀況下 img、連接默認是可拖拽的

固然，設置draggable="true"元素僅僅是「可拖拽」，鬆手後就還原，若是須要拖拽到指定位置僅須要在drop記錄一下就好了

dropbox.addEventListener('drop',function(ev){
    dragbox.style.left = XX;
    dragbox.style.top = XX;
})

原生的拖拽

原生拖拽有不少優點，你們能夠自行去了解一下，就比如原生和模擬器的區別。

可是，稍微有點審美追求的確定不會用原生默認的拖拽，由於實在是不怎麼好看。

下面先看看原生的拖拽效果

原生的拖拽效果

原生默認的拖拽效果是一個半透明的預覽圖（暫且稱爲「幽靈」吧），若是拖拽的元素尺寸比較小的話，生成的預覽圖還能夠接受，只是半透明而已，以下

若是大一點就沒法接受了，「幽靈」就不僅是半透明，並且還有從鼠標位置向外擴散的漸變效果（真不知道是怎麼設計的，多是爲了性能考慮吧），反正就是很難看吧，以下

其次，還有一個效果是被拖拽的元素仍保持不動，只是被拖拽出來的「幽靈」在移動，若是背景複雜一點，那麼就徹底分不清了，好比下面的拖拽排序（仔細找找上面的「幽靈」）

功能是有了，但確實分不清，也談不上什麼體驗了

自定義原生的拖拽

原生的拖拽基本上是沒法自定義的，惟一能夠更改的只有setDragImage方法，能夠指定一張預覽圖來代替默認放入預覽圖，然而這種方式也很雞肋，自定義的預覽圖仍然和默認的效果一直，都是半透明的，其次，實時生成當前節點的預覽圖也是一件麻煩事。

另外一條思路其實也比較容易，以下。

1. 去除默認的預覽圖
2. 複製一份當前目標元素，cloneObj
3. 監聽拖拽事件，改變cloneObj的位置
4. 拖拽結束移除cloneObj

下面均爲僞代碼，完整代碼可在文章末尾查看

1. 去除默認的預覽圖

雖然setDragImage比較雞肋，可是咱們能夠設置一張透明的圖片就能夠實現去除默認的預覽圖的效果了

dragbox.addEventListener('dragstart', function (ev) {
    var img = new Image();
    img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
    ev.dataTransfer.setDragImage(img, 0, 0);
}

普通元素設置 draggable="true"後，Chrome能夠直接拖拽，FireFox須要在 dragstart設置 ev.dataTransfer.setData('text','任意值')才行

2.複製一份當前目標元素，cloneObj

複製一份當前目標元素，而且設置position:fixed等屬性，能夠懸浮在頁面之上，而後添加到body，以下

var cloneObj = this.cloneNode(true);
cloneObj.style = 'position:fixed;left:0;top:0;z-index:999;pointer-events:none;transform:translate3d( ' + left + 'px ,' + top + 'px,0);'
document.body.appendChild(cloneObj);

3.監聽拖拽事件，改變cloneObj的位置

拖拽元素時會觸發drag事件，和鼠標移動事件相似，能夠取到當前鼠標位置（在拖拽過程當中並不觸發mousemove事件），同時也能隱藏原目標

dragbox.addEventListener('drag', function (ev) {
    if(cloneObj){
        cloneObj.style.transform = 'translate3d( ' + left + 'px ,' + top + 'px,0)';
        dragbox.style.visibility = 'visible';
    }
})

Chrome確實是這樣，FireFox雖然也能觸發drag事件，而後裏面卻取不到鼠標位置信息（均爲0），因此，咱們只能把監聽放在dragover上，雖然不太完美，也是一個方法

document.addEventListener('dragover', function (ev) {
    if(cloneObj){
        cloneObj.style.transform = 'translate3d( ' + left + 'px ,' + top + 'px,0)';    
    }
})

4.拖拽結束移除cloneObj

拖拽結束移除cloneObj，而且還原原目標

oDiv.addEventListener('dragend', function (ev) {
    document.body.removeChild(cloneObj);
    cloneObj = null;
    dragbox.style.visibility = 'visible';
})

draggable-polyfill

根據以上思路，完成了一個draggable-polyfill，這個polyfill的做用很簡單，僅僅只是單純的美化原生的拖拽，去除了原有的半透明預覽圖，不改變原有邏輯，只要項目中用到了原生拖拽，均可以打上這個補丁。

好比上面那個拖拽排序，引用這個polyfill之後，效果以下

項目地址 https://github.com/XboxYan/draggable-polyfill

使用方式也很簡單，直接引用就能夠了

<script src="./lib/draggable-polyfill.js"></script>

若是是工程化項目，也可使用npm安裝

npm i draggable-polyfill

而後直接導入用就能夠了

import draggable-polyfill;

更多示例可查看http://xboxyan.codelabo.cn/draggable-polyfill/example/index.html

須要注意的一點是：因爲只是複製了當前節點，因此若是你的樣式依賴於父級，那麼複製出來的樣式就會和原目標不同

.parent .dragbox{
    background:red
}
/*改成*/
.dragbox{
    background:red
}

其餘技巧

能夠在網上隨便找一個原生拖拽的案例，直接在控制檯粘貼以上draggable-polyfill.js，就能夠當即「試用」了，好比說這個例子，打開控制檯粘貼而後回車再看看拖拽效果（以下）。