VUE使用draggable实现组件拖拽

Halima ·
更新时间:2024-11-15
· 222 次阅读

本文实例为大家分享了draggable组件拖拽实例,供大家参考,具体内容如下

实现步骤

1、导入draggable依赖

npm i -S vuedraggable

2、引入draggable

import draggable from "vuedraggable"

3、注册draggable

components: {      draggable   },

4、使用draggable

html页面 

<div class="col-md-3">       <draggable         class="list-group"         tag="ul"         :list="this.list"         v-bind="dragOptions"         :move="onMove"         @start="isDragging = true"         @end="isDragging = false"       >         <div           class="list-group-item"           v-for="(item, index) in this.list"           :key="item.value"         >           <span class="badge">{{ index }}</span>           <span class="lefttitle">             {{ item.name }}           </span>         </div>       </draggable> </div>

定义属性和list 

data() {     return {       list: [         {           name: "-姓名",           value: "name",         },         {           name: "-性别",           value: "sex",         },         {           name: "-年龄",           value: "age",         },         {           name: "-地址",           value: "address",         },         {           name: "-邮箱",           value: "mailbox",         },       ],       editable: true, //决定是否可拖动,为false则组件不可拖动       isDragging: false,     };   },

定义移动方法

methods: {     onMove({ relatedContext, draggedContext }) {       const relatedElement = relatedContext.element;       const draggedElement = draggedContext.element;       return (         (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed       );     },   },

5、完整VUE代码

<template>   <div class="fluid container">     <div class="form-group form-group-lg panel panel-default">       <div class="panel-heading">         <h3 class="panel-title">组件拖拽实例</h3>       </div>       <div class="panel-body">         <div class="checkbox">           <label             ><input type="checkbox" v-model="editable" />设置组件可拖拽</label           >         </div>       </div>     </div>     <div class="col-md-3">       <draggable         class="list-group"         tag="ul"         :list="this.list"         v-bind="dragOptions"         :move="onMove"         @start="isDragging = true"         @end="isDragging = false"       >         <div           class="list-group-item"           v-for="(item, index) in this.list"           :key="item.value"         >           <span class="badge">{{ index }}</span>           <span class="lefttitle">             {{ item.name }}           </span>         </div>       </draggable>     </div>     <div class="list-group col-md-3">       <pre>{{ listString }}</pre>     </div>   </div> </template> <script> import draggable from "vuedraggable"; export default {   components: {     draggable,   },   data() {     return {       list: [         {           name: "-姓名",           value: "name",         },         {           name: "-性别",           value: "sex",         },         {           name: "-年龄",           value: "age",         },         {           name: "-地址",           value: "address",         },         {           name: "-邮箱",           value: "mailbox",         },       ],       list2: [],       editable: true, //决定是否可拖动,为false则组件不可拖动       isDragging: false,       delayedDragging: false,     };   },   methods: {     onMove({ relatedContext, draggedContext }) {       const relatedElement = relatedContext.element;       const draggedElement = draggedContext.element;       return (         (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed       );     },   },   computed: {     dragOptions() {       return {         animation: 0,         group: "description",         disabled: !this.editable,         ghostClass: "ghost",       };     },     listString() {       return JSON.stringify(this.list, null, 2);     },   },   watch: {     isDragging(newValue) {       if (newValue) {         this.delayedDragging = true;         return;       }       this.$nextTick(() => {         this.delayedDragging = false;       });     },   }, }; </script> <style> .flip-list-move {   transition: transform 0.5s; } .no-move {   transition: transform 0s; } .ghost {   opacity: 0.5;   background: #c8ebfb; } .list-group {   min-height: 20px; } .list-group-item {   cursor: move; } .list-group-item i {   cursor: pointer; } </style>



VUE draggable

需要 登录 后方可回复, 如果你还没有账号请 注册新账号