* 效果圖：* 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"
9filter
=".undraggable"
10>
11<
li v-for
="(item, index) in imglist"
:key
="index"
:class
="item.canedit ? 'draggable' : 'undraggable'"
>
12<
div
class
="dargbtn-lock el-icon-lock"
@click
="removeevent(item)"
>
div>
13<
div
class
="dargbtn"
>
14<
p>可移動到位置
p>
15<
svg-icon
icon-class
="drag"
/>
16div
>
17<
img
:src
="item.path"
alt=""
>
18li
>
19draggable
>
20ul
>
21div
>
22template
>
1 import draggable from 'vuedraggable';23 export default,9
data () ,
1722]23
}24},25
created () ,
28methods: 33}
34 }
* 解析
1.handle=".dargbtn" 觸發拖拽事件的按鈕類名2.:animation="200" 動畫時間
3.filter=".undraggable" 不可拖拽的元素的類名
4.為了實現不可拖拽，
<
div
class
="dargbtn-lock el-icon-lock"
@click
="removeevent(item)"
>
div>
該元素繫結事件控制item中的canedit屬性，通過該屬性給拖拽元素新增類名達到該元素不可拖拽
Vue draggable實現從左到右拖拽功能
1 安裝外掛程式 npm install vuedraggable 2 在需要使用的元件中引入 import draggable from vuedraggable 3 註冊元件 components 示例 height 1000px test left 左側按鈕 v model list1 dra...
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 anima...
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...