vuedraggable拖拽外掛程式使用

引入方式（npm）：

npm i -s vuedraggable

<

template
>
<
div>
<
el-row
>
<
el-col 
:span
="12"
class
="col"
>
<
span
>a列
span
>
<
draggable 
v-model
="list"
chosenclass
="chosen"
group
= "name"
animation
="300"
filter
=".forbid"
:move
="onmove"
>
<
transition-group
>
<
div 
class
="dragitem"
:id="item.name"
v-for
="(item,index) in list"
:key
="item.name"
>
<
div>索引：}
div>
<
div 
class
="name"
>姓名:<
span
>}
span
>
div>
<
div>年齡:}
div>
<
div>工作:}
div>
div>
transition-group
>
draggable
>
el-col
>
<
el-col 
:span
="12"
class
="col"
>
<
span
>b列
span
>
<
draggable 
v-model
="list2"
chosenclass
="chosen"
group
= "name"
animation
="300"
>
<
transition-group
>
<
div 
class
="dragitem"
v-for
="(item,index) in list2"
:key
="item.name"
>
<
div>索引：}
div>
<
div 
class
="name"
>姓名:<
span
>}
span
>
div>
<
div>年齡:}
div>
<
div>工作:}
div>
div>
transition-group
>
draggable
>
el-col
>
el-row
>
div>
template
>
<
script
>
export 
default
,    data(),,,
,],list2:[,,
,,]}
},methods:,  
}}script
>
<
style 
lang
="scss"
scoped
>
.col
}.dragitem
}    border:1px solid blue;
border-radius:4px;
padding:4px;
margin-bottom:8px;
}style
>

一些屬性的說明，具體可以插卡安文件，文件精巧，還有例子，檢視方便：

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

滾動速度

vue拖拽元件vuedraggable的使用說明

doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title box style function dragstar...

Vue draggable實現從左到右拖拽功能

1 安裝外掛程式 npm install vuedraggable 2 在需要使用的元件中引入 import draggable from vuedraggable 3 註冊元件 components 示例 height 1000px test left 左側按鈕 v model list1 dra...

vuedraggable 實現部分元素不允許拖拽

效果圖 template 1 template 2 div 3 div class projset title 活動排序 div 4 ul class projset content 5 draggable 6 list imglist 7handle dargbtn 8 animation 200...