整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
言
HTML5 中提供了直接拖放的 API，極大的方便我們實現拖放效果，不需要去寫一大堆的 js，只需要通過監聽元素的拖放事件就能實現各種拖放功能。
想要拖放某個元素，必須設置該元素的 draggable 屬性為 true，當該屬性為 false 時，將不允許拖放。而 img 元素和 a 元素都默認設置了 draggable 屬性為 true，可直接拖放，如果不想拖放這兩個元素，把屬性設為 false 即可。
拖放事件
拖放事件由不同的元素產生。一個元素被拖放，他可能會經過很多個元素上，最終到達想要放置的元素內。這里，我暫時把被拖放的元素稱為源對象，被經過的元素稱為過程對象，到達的元素我稱為目標對象。不同的對象產生不同的拖放事件。
源對象：
過程對象：
目標對象：
<div id="source" draggable="true">a元素</div>
<div id="process">b元素</div>
<div id="target">c元素</div>
<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 對象
在所有拖放事件中提供了一個數據傳遞對象 dataTransfer，用于在源對象和目標對象間傳遞數據。接下來認識一下這個對象的方法和屬性，來了解它是如何傳遞數據的。
setData()
該方法向 dataTransfer 對象中存入數據。接收兩個參數，第一個表示要存入數據種類的字符串，現在支持有以下幾種：
第二個參數為要存入的數據。例如：
event.dataTransfer.setData('text/plain','Hello World');
getData()
該方法從 dataTransfer 對象中讀取數據。參數為在 setData 中指定的數據種類。例如：
event.dataTransfer.getData('text/plain');
clearData()
該方法清除 dataTransfer 對象中存放的數據。參數可選，為數據種類。若參數為空，則清空所有種類的數據。例如：
event.dataTransfer.clearData();
setDragImage()
該方法通過用img元素來設置拖放圖標。接收三個參數，第一個為圖標元素，第二個為圖標元素離鼠標指針的X軸位移量，第三個為圖標元素離鼠標指針的Y軸位移量。例如：
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 屬性
這兩個屬性結合起來設置拖放的視覺效果。
值得注意的是：dataTransfer 對象不支持IE。對，不支持IE。
實現拖放排序
上面已經熟悉了拖放 API 的使用，我們來實現個簡單的拖放排序，這也是在項目中比較常見的。先來理一下思路：
主要代碼如下：
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();}
兼容
主要是在IE中的兼容不太好，不過至少在IE10中能兼容上面的拖動排序。
而且在我簡單的試驗中發現，就是在 IE 中元素不設置 height 的時候，不會觸發 dragleave 事件。
更重要的一點是在 ios 和安卓上，完全不兼容。不過還好，有一個插件能讓它在移動端完美兼容。
插件地址：ios-html5-drag-drop-shim
只需要在原有的代碼中引入該插件，即可在移動端上實現拖動了。
<script>
var iosDragDropShim = { enableEnterLeave: true }
</script>
<script src="vendor/ios-drag-drop.js"></script>
https://zhuanlan.zhihu.com/p/26666141
到拖拽，我們都很熟悉，那么拖放呢？一字之差，代表的意義是不一樣的，拖拽就是拉著走，拖放就是有拖，有放，我們都知道原生 JS 拖拽效果的缺點：1. 代碼相對復雜與冗余2. 僅限于在瀏覽器內的元素間拖放3、不能實現跨頁面的拖放
所以H5就出現了拖放技術，與 JS 原生相比 HTML5 拖放的優勢：
H5拖放技術，drag&drop，對于瀏覽器的支持性：
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注：在 Safari 5.1.2 中不支持拖放。
那么它有哪些api語法，我們來看一下：
1、 draggable 屬性
通過 draggable 告訴瀏覽器哪些元素需要實現拖拽功能。有三個可選值：
true： 元素可以被拖拽
false：元素不能被拖拽
auto：瀏覽器自己判斷元素是否能被拖拽 ( 默認 )
2、對象拖放事件
dragstart：按下鼠標鍵并開始移動時觸發
drag：在元素拖拽過程中持續觸發----相似與mousemove
dragend：元素拖拽停止時觸發
3、投放區事件流程
元素被拖動到有效的放置目標時，下列事件會依次發生：
1. dragenter：當拖拽對象進入投放區時觸發
2. dragover ：拖拽對象在投放區內移動時持續觸發
3. dragleave：元素被拖出了投放區時觸發
4. drop ：拖拽對象投放在投放區時觸發
雖然所有元素都支持放置目標事件，但這些元素默認是不允許放置的，需要重寫事件的默認行為，例如：
在ondragover中一定要執行 preventDefault()否則ondrop事件不會被觸發
4、 dataTransfer 對象--常用方法
setDragImage (圖標，圖標距指針X軸偏移值，Y軸偏移值 )
指定一個圖標，當拖動發生時，顯示在光標下方
5、dataTransfer 對象--常用屬性：
dropEffect 表示被拖動的元素能夠執行哪種放置行為
可能的值：
"none" : 不能把拖動的元素放在這里
"move": 把拖動的元素移動到放置目標
"copy": 把拖動的元素復制到放置目標
"link": 放置目標會打開拖動的元素（有URL）
effectAllowed 允許拖動元素的哪種dropEffect
允許值：
"copyLink" : 允許值為 copy 和 link 的 dropEffect
"copyMove": 允許值為 copy 和 move 的 dropEffect
"linkMove" : 允許值為 link和 move 的 dropEffect
"all" : 允許任意的 dropEffect
注意：dropEffect屬性搭配effectAllowed屬性使用
在dragstart事件處理程序中設置effectAllowed屬性
在dragover事件處理程序中設置dropEffect屬性
dropEffect 的每個可能值都會導致光標顯示為不同的符號
6、files 文件
dataTransfer.files：如果是拖放文件，則返回正在拖放的文件列表FileList
FileReader：專門用于讀取文件，FileReader 接口提供一些讀取文件的方法與一個包含讀取結果的事件模型
FileReader.readAsDataURL方法：參數為要讀取的文件對象，將文件讀取為DataUrl
FileReader.onload事件：當讀取文件成功完成的時候觸發此事件，在事件觸發后，你可以通過this.result來獲取讀取的文件數據，如果是圖片，將返回base64格式的圖片數據。
以上就是拖放提供的api，非常多，可以任意設置拖放的效果，拖拽事件以及投放事件，我們比較常見的垃圾桶效果，拖動排序，使用h5拖放技術實現就會非常簡單。
最近接了一個需求，需要實現不同登錄人員可以自定義首頁模塊卡片。簡單來說，就是實現首頁看板模塊的增添與拖拉拽，效果如下：
原生js是支持拖拉拽的，只需要將拖拽的元素的 draggable 屬性設置成 "true"即可，然后就是調用相應的函數即可。
拖拽操作 - Web API 接口參考 | MDN
但是，原生js功能不夠完善，使用起來需要改造的地方很多，因此，選用成熟的第三方插件比較好。
我們的主項目采用的是vue3，,經過一系列對比，最終選擇了 vue-draggable-next這個插件。
vue-draggable-next
vue-draggable-next的周下載量月3萬左右，可以看出是一個比較靠譜的插件。
它的使用方式npmj上也介紹的很詳細：
vue-draggable-next
如果英文的使用Api看起來比較難受，網上還有中文的使用文檔：
vue.draggable.next 中文文檔 - itxst.com
這個插件也有vue2版本和純js版本，其他框架也是也是可以完美使用的。
根據我們的需求，我們應該實現的是分組拖拽，假設我們有三列，那我們要實現的就是這A、B、C三列數據相互拖拽。
我們看看中文官網給的示例：
vue.draggable.next group 例子
看起來很容易，我們只需要寫多個draggable標簽，每個draggable標簽寫入相同的組名即可。
回到代碼中，要想實現一個三列可拖拉拽的模塊列表，我們首先需要引入組件
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
// ....
</script>
然后定義一個數組儲存數據：
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
const moduleList = ref([
{
"columnIndex": 1,
"moduleDetail": [
{ "moduleCode": "deviation", "moduleName": "控制失調空間",},
{ "moduleCode": "meeting_pending", "moduleName": "會議待辦",},
{ "moduleCode": "abnormal_events", "moduleName": "異常事件", },
{ "moduleCode": "audit_matters", "moduleName": "事項審批",}
],
},
{
"columnIndex": 2,
"moduleDetail": [
{ "moduleCode": "air_conditioning_terminal", "moduleName": "空調末端", }
],
},
{
"columnIndex": 3,
"moduleDetail": [
{ "moduleCode": "run_broadcast", "moduleName": "運行播報",},
{"moduleCode": "my_schedule", "moduleName": "我的日程", },
{ "moduleCode": "cold_station", "moduleName": "冷站",}
],
}
])
</script>
最后，在代碼中我們使用v-for循環渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" group="column" >
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<!-- 模塊內容 -->
</div>
</VueDraggableNext>
</div>
注意上面的html結構，我們循環渲染了三列VueDraggableNext標簽，每個VueDraggableNext標簽內部又通過v-for="(item, index) in moduleColumn.moduleDetail渲染了這個拖拽列內部的所有模塊。我們通過group="column" 讓每個VueDraggableNext組件的組名相同，實現了三個拖拽標簽之間的模塊互相拖拉拽。
正常情況小，我們肯定是希望在某個組件的固定位置才能拖動組件，因此我們需要使用到拖拽組件的handle屬性。
vue.draggable.next屬性說明：
handle | :handle=".mover" 只有當鼠標在class為mover類的元素上才能觸發拖到事件 |
根據屬性說明，我們的代碼實現起來也非常容易了。
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽區域
</div>
<!-- 模塊內容 -->
</div>
</VueDraggableNext>
</div>
實際開發中，我么一定會根據接口或者操作動態的更改列表，代碼層也就是更改moduleList的值。非常幸運的是，如果你按照上面的方式寫代碼，當你拖拉拽完畢后，上面的moduleList值會自動更改，我們不用做任何處理?。。∵@么看，數據的增刪改根本不是問題。
實際開發中，我們可能會遇到一個問題，就是如何動態的去渲染組件，如果你熟悉vue，使用動態組件component就可以實現。
首先，我們需要定義一個模塊列表
import MeetingPending from '../components/meetingPending.vue'
import AbnormalEvents from '../components/abnormalEvents/index.vue'
import MySchedule from '../components/mySchedule.vue'
import TransactionApproval from '../components/transactionApproval.vue'
import RunningBroadcast from '../components/runningBroadcast.vue'
import CodeSite from '../components/codeSite/index.vue'
import MismatchSpace from '../components/mismatchSpace/index.vue'
import AirDevice from '../components/airDevice/index.vue'
// !全量模塊選擇列表
export const allModuleList = [
{ moduleCode: 'meeting_pending', label: '會議待辦', component: MeetingPending },
{ moduleCode: 'my_schedule', label: '我的日程', component: MySchedule },
{ moduleCode: 'audit_matters', label: '事項審批', component: TransactionApproval },
{ moduleCode: 'abnormal_events', label: '異常事件', component: AbnormalEvents },
{ moduleCode: 'deviation', label: '控制失調空間', component: MismatchSpace },
{ moduleCode: 'run_broadcast', label: '運行播報', component: RunningBroadcast },
{ moduleCode: 'cold_station', label: '冷站', component: CodeSite },
{ moduleCode: 'air_conditioning_terminal', label: '空調末端', component: AirDevice }
]
然后根據moduleCode做匹配，動態渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽區域
</div>
<component :is="getComponentsByCode(item.moduleCode)" ></component>
</div>
</VueDraggableNext>
</div>
如果上面的功能不滿足你的需求，我們可以使用這個組件的其他屬性，完成更多意想不到的效果
如果下面的屬性說明未能完全看明，可以看左邊的對應的菜單查看詳細說明和例子。
屬性名稱 | 說明 |
group | 如果一個頁面有多個拖拽區域，通過設置group名稱可以實現多個區域之間相互拖拽 或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] } |
sort | 是否開啟排序,如果設置為false,它所在組無法排序 |
delay | 鼠標按下多少秒之后可以拖拽元素 |
touchStartThreshold | 鼠標按下移動多少px才能拖動元素 |
disabled | :disabled= "true",是否啟用拖拽組件 |
animation | 拖動時的動畫效果，如設置animation=1000表示1秒過渡動畫效果 |
handle | :handle=".mover" 只有當鼠標在class為mover類的元素上才能觸發拖到事件 |
filter | :filter=".unmover" 設置了unmover樣式的元素不允許拖動 |
draggable | :draggable=".item" 樣式類為item的元素才能被拖動 |
ghost-class | :ghost-class="ghostClass" 設置拖動元素的占位符類名,你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true |
chosen-class | :ghost-class="hostClass" 被選中目標的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true |
drag-class | :drag-class="dragClass"拖動元素的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true |
force-fallback | 默認false，忽略HTML5的拖拽行為，因為h5里有個屬性也是可以拖動，你要自定義ghostClass chosenClass dragClass樣式時，建議forceFallback設置為true |
fallback-class | 默認false，克隆選中元素的樣式到跟隨鼠標的樣式 |
fallback-on-body | 默認false，克隆的元素添加到文檔的body中 |
fallback-tolerance | 按下鼠標移動多少個像素才能拖動元素，:fallback-tolerance="8" |
scroll | 默認true,有滾動區域是否允許拖拽 |
scroll-fn | 滾動回調函數 |
scroll-fensitivity | 距離滾動區域多遠時，滾動滾動條 |
scroll-speed | 滾動速度 |
傳送門：vue.draggable.next 中文文檔 - itxst.com
關聯文章：如何實現模塊的錨點定位及閃爍提示：juejin.cn/post/734622…
作者：石小石Orz
鏈接：https://juejin.cn/post/7346121373112811583
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
