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

本文轉載自查看原文 2020-07-03 10:18 5706


* 效果圖：

* 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屬性，通過該屬性給拖拽元素添加類名達到該元素不可拖拽

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vuedraggable 設置元素不可拖拽 Set中的元素為什么不允許重復 vuedraggable 實現拖拽功能 vue拖拽--實現表格行和列的拖拽 [sortable.js]---元素拖拽【vuedraggable】 vuedraggable拖拽交換元素位置 cdn引入vuedraggable實現拖拽報錯：前言不允許有內容 python set（）不允許重復的集合 cvc-complex-type.3.2.2: 元素 'constructor-arg' 中不允許出現屬性 'name' 更改＂xxxx＂的權限: 不允許的操作