vuedraggable實(shí)現(xiàn)拖拽功能

更新時間：2022年04月06日 09:06:58 作者：EsquireY

這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vuedraggable實(shí)現(xiàn)拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下

項(xiàng)目需求

簡單實(shí)現(xiàn)一個vue拖拽小案例，右側(cè)選項(xiàng)區(qū)拖拽到左側(cè)目標(biāo)區(qū)域，拖動成功的不能再次拖動，并改變顏色。

安裝 vuedraggable 插件

cnpm i -S vuedraggable

頁面直接引用

import draggable from “vuedraggable”;
…
components: { draggable },

源碼參考

<template>
? <div class="container">
? ? <div class="content">
? ? ? <div class="targetContent">
? ? ? ? <draggable
? ? ? ? ? :list="resultlists"
? ? ? ? ? group="article"
? ? ? ? ? :disabled="disabled"
? ? ? ? ? @start="targetStart"
? ? ? ? ? @end="targetEnd"
? ? ? ? ? class="targetCard"
? ? ? ? ? style="height: 100px"
? ? ? ? >
? ? ? ? ? <div
? ? ? ? ? ? v-for="resultlists in resultlists"
? ? ? ? ? ? :key="resultlists.id"
? ? ? ? ? ? class="list-complete-item"
? ? ? ? ? >
? ? ? ? ? ? <div class="list-complete-item-handle">{{ resultlists.name }}</div>
? ? ? ? ? </div>
? ? ? ? </draggable>
? ? ? </div>
? ? ? <div class="optionsContent">
? ? ? ? <draggable
? ? ? ? ? :list="targetLists"
? ? ? ? ? :options="{
? ? ? ? ? ? group: { name: optionsName, pull: 'clone' },
? ? ? ? ? ? sort: false,
? ? ? ? ? }"
? ? ? ? ? filter=".undraggable"
? ? ? ? ? @end="optionEnd"
? ? ? ? ? class="dragArea"
? ? ? ? >
? ? ? ? ? <div
? ? ? ? ? ? v-for="targetList in targetLists"
? ? ? ? ? ? :key="targetList.id"
? ? ? ? ? ? :class="{ undraggable: targetList.flag }"
? ? ? ? ? ? class="list-complete-item"
? ? ? ? ? >
? ? ? ? ? ? <div class="list-complete-item-handle2">{{ targetList.name }}</div>
? ? ? ? ? </div>
? ? ? ? </draggable>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
import draggable from "vuedraggable";

export default {
? name: "DndList",
? components: { draggable },
? watch: {},
? data() {
? ? return {
? ? ? optionsName: "article",
? ? ? disabled: false,
? ? ? resultlists: [],
? ? ? targetLists: [
? ? ? ? { id: 1, name: "平板支撐" },
? ? ? ? { id: 2, name: "俄挺" },
? ? ? ? { id: 3, name: "空中自行車" },
? ? ? ? { id: 4, name: "波比" },
? ? ? ? { id: 5, name: "兩頭起摸腳" },
? ? ? ? { id: 6, name: "窄距俯臥撐" },
? ? ? ? { id: 7, name: "寬距俯臥撐" },
? ? ? ? { id: 8, name: "鉆石俯臥撐" },
? ? ? ? { id: 9, name: "空中擊掌俯臥稱" },
? ? ? ? { id: 10, name: "深蹲提膝跳" },
? ? ? ],
? ? };
? },
? computed: {},
? methods: {
? ?? ?// 右側(cè)拖拽結(jié)束事件
? ? optionEnd(ev) {
? ? // 如果拖拽目標(biāo)區(qū)域和左側(cè)區(qū)域的 name 一致，允許拖拽，并改變狀態(tài)
? ? ? if (ev.to.className === "targetCard") {
? ? ? ? this.$set(this.targetLists[ev.oldIndex], "flag", true);
? ? ? }
? ? },
?? ?// 左側(cè)區(qū)域開始拖動事件（修改右側(cè)區(qū)域的名字，不一致的話拖動失敗）
? ? targetStart() {
? ? ? this.optionsName = "1111";
? ? },
?? ?// 拖動結(jié)束時，把右側(cè)區(qū)域的名字恢復(fù)
? ? targetEnd() {
? ? ? this.optionsName = "article";
? ? },
? },
};
</script>

<style lang="less" scoped>
.container {
? width: 100%;
? height: 100%;
? background-color: rgba(5, 35, 56, 0.6);
? display: flex;
? align-items: center;
? justify-content: center;
? .content {
? ? width: 1200px;
? ? height: 600px;
? ? background-color: #052338;
? ? // margin: 120px auto auto;
? ? display: flex;

? ? .targetContent {
? ? ? width: 100%;
? ? ? height: 100%;
? ? }

? ? .optionsContent {
? ? ? width: 100%;
? ? ? height: 100%;
? ? ? border-left: 2px solid #4ab7bd;
? ? }
? }
}
.list-complete-item {
? display: inline-block;
? font-size: 16px;
? font-weight: 400;
? color: #ffffff;
? padding: 10px 18px;
? margin: 10px 8px 0;
? background: rgba(237, 245, 255, 0.1);
? border: 1px solid #bfcbd9;
? border-radius: 0.18rem;
? cursor: pointer;
? transition: all 1s;
}

.list-complete-item.sortable-chosen {
? background: #4ab7bd;
}

.list-complete-item.sortable-ghost {
? background: #30b08f;
}
.undraggable {
? background-color: rgb(143, 233, 233);
}

.list-complete-enter,
.list-complete-leave-active {
? opacity: 0;
}
</style>

常用事件

@start = "startChange" // 開始拖動元素觸發(fā)的事件
@end= "endChange" // 拖動元素結(jié)束觸發(fā)的事件

常用屬性配置

:options="{
?? ?group: { name: optionsName, pull: 'clone' }, // name 相同的集合子元素可以互相拖動
? ? sort: false, // 是否禁止拖動排序
? ? disabled: false, // 如果設(shè)置為真，則禁用sortable。
? ? animation: 150, ?// ms, 動畫速度運(yùn)動項(xiàng)目排序時，' 0 ' -沒有動畫。
? ? filter: ".ignore-elements", ?// 不導(dǎo)致拖拽的選擇器(字符串或函數(shù))
? ? draggable: ".item", ?// 指定元素中的哪些項(xiàng)應(yīng)該是可拖動的。
? ?? ?ghostClass: "sortable-ghost", ?// 設(shè)置拖動元素的class的占位符的類名。
? ?? ?chosenClass: "sortable-chosen", ?// 設(shè)置被選中的元素的class
? ?? ?dragClass: "sortable-drag", ?//拖動元素的class。
? }"

注意事項(xiàng)

1、拖動的時間元素失去樣式

選項(xiàng)區(qū)域和目標(biāo)區(qū)域的元素樣式不一致

2、拖動失敗

選項(xiàng)區(qū)域和目標(biāo)區(qū)域的名字不一致，會導(dǎo)致拖動失敗

3、控制臺報提示（ props is deprecated, add sortable options directly as vue.draggable item, or use v-bind…）

插件版本問題，:options="{}" 的寫法已經(jīng)被棄用，直接使用 v-bind 寫法，具體參照介紹

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

您可能感興趣的文章: