VUE使用draggable實現(xiàn)組件拖拽

更新時間：2022年04月06日 09:55:46 作者：三流人才

這篇文章主要為大家詳細介紹了VUE使用draggable實現(xiàn)組件拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了draggable組件拖拽實例，供大家參考，具體內(nèi)容如下

實現(xiàn)步驟

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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: