【vuedraggable】实现部分元素不允许拖拽 


* 效果图：

 * template

 1 <template>
 2   <div>
 3     <div class="projset-title">活动图片排序</div>
 4     <ul class="projset-content">
 5       <draggable
 6         :list="imgList"
 7         handle=".dargBtn"
 8         :animation="200"
 9         filter=".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" />
16           </div>
17           <img :src="item.path" alt="">
18         </li>
19       </draggable>
20     </ul>
21   </div>
22 </template>




 1   import draggable from 'vuedraggable';
 2 
 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 () {
26 
27     },
28     methods: {
29       removeEvent (item) {
30         item.canEdit = !item.canEdit
31         console.log(item.canEdit);
32       }
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属性，通过该属性给拖拽元素添加类名达到该元素不可拖拽




 


 


 


 


 






            

            
posted @ 
2020-07-03 10:18 
行屰 
阅读(12967) 
评论(1) 
编辑 
收藏 
举报