Vuedraggable 拖拽插件

Vue.Draggable是一款基於Sortable.js實現的vue拖拽插件。支持移動設備、拖拽和選擇文本、智能滾動，可以在不同列表間拖拽、不依賴jQuery為基礎、vue 2過渡動畫兼容、支持撤銷操作，總之是一款非常優秀的vue拖拽組件。本篇將介紹如何搭建環境及簡單的例子，使用起來特別簡單對被拖拽元素也沒有CSS樣式的特殊要求。

 

文檔地址:vuedraggable

NPM或yarn安裝方式

 

yarn add vuedraggable
npm i -S vuedraggable

 

 

屬性名稱	說明
group	:group= "name"，相同的組之間可以相互拖拽
sort	:sort= "true",是否開啟內部排序,如果設置為false,它所在組無法排序，在其他組可以拖動排序
delay	:delay= "0", 鼠標按下后多久可以拖拽
touchStartThreshold	鼠標移動多少px才能拖動元素
disabled	:disabled= "true",是否啟用拖拽組件
animation	拖動時的動畫效果，還是很酷的,數字類型。如設置animation=1000表示1秒過渡動畫效果
handle	:handle=".mover" 只有當鼠標移動到css為mover類的元素上才能拖動
filter	:filter=".unmover" 設置了unmover樣式的元素不允許拖動
draggable	:draggable=".item" 那些元素是可以被拖動的
ghostClass	:ghostClass="ghostClass" 設置拖動元素的占位符類名,你的自定義樣式可能需要加!important才能生效，並把forceFallback屬性設置成true
chosenClass	:ghostClass="hostClass" 被選中目標的樣式，你的自定義樣式可能需要加!important才能生效，並把forceFallback屬性設置成true
dragClass	:dragClass="dragClass"拖動元素的樣式，你的自定義樣式可能需要加!important才能生效，並把forceFallback屬性設置成true
dataIdAttr	dataIdAttr: 'data-id'
forceFallback	默認false，忽略HTML5的拖拽行為，因為h5里有個屬性也是可以拖動，你要自定義ghostClass chosenClass dragClass樣式時，建議forceFallback設置為true
fallbackClass	默認false，克隆的DOM元素的類名
allbackOnBody	默認false，克隆的元素添加到文檔的body中
fallbackTolerance	拖拽之前應該移動的px
scroll	默認true,有滾動區域是否允許拖拽
scrollFn	滾動回調函數
scrollSensitivity	距離滾動區域多遠時，滾動滾動條
scrollSpeed	滾動速度

 

例:

數組元素位置隨意可拖動

<template>
  <div>
    <br>
    <br><el-link href="https://www.itxst.com/vue-draggable/tutorial.html" target="target">文檔</el-link>
    <br>{{ list }}
    <br>
    <br>
    <vuedraggable v-model="list" class="content">
      <template v-for="item,key in list">
        <el-tag :key="key" class="item">{{ item }}</el-tag>
      </template>
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
export default {
  components: { vuedraggable },
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  }
}
</script>

<style>
.item
{
  margin:0 10px
}
.content
{
  background: gray;
}
</style>