9
filter
=".undraggable"
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"
/>
16
</
div
>
17
<
img
:src
="item.path"
alt
=""
>
18
</
li
>
19
</
draggable
>
20
</
ul
>
21
</
div
>
22
</
template
>
1 import draggable from 'vuedraggable';
3 export default {
4 name: 'EventDrag',
5 componentName: 'eventDrag',
6 components: {
7 draggable
8 },
9 data () {
10 return {
11 imgList: [
12 {
13 path: require('../../../../../common/assets/img/u1387.png'),
14 name: '1',
15 canEdit: true
16 },
17 {
18 path: require('../../../../../common/assets/img/u1387.png'),
19 name: '2',
20 canEdit: true
21 }
22 ]
23 }
24 },
25 created () {
27 },
28 methods: {
29 removeEvent (item) {
30 item.canEdit = !item.canEdit
31 console.log(item.canEdit);
32 }
33 }
1.handle=".dargBtn" 触发拖拽事件的按钮类名
2.:animation="200" 动画时间
3.filter=".undraggable" 不可拖拽的元素的类名
4.为了实现不可拖拽，
<div class="dargBtn-lock el-icon-lock" @click="removeEvent(item)"></div>
该元素绑定事件控制item中的canEdit属性，通过该属性给拖拽元素添加类名达到该元素不可拖拽
