标签拖拽功能vuedraggable

最新推荐文章于 2025-06-17 14:15:00 发布

原创

最新推荐文章于 2025-06-17 14:15:00 发布 · 891 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了如何在前端项目中利用vuedraggable库实现标签的拖拽功能。首先通过npm安装vuedraggable，然后在代码中引入并应用，实现标签元素的动态排序和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签拖拽功能vuedraggable

1安装npm i -S vuedraggable

在这里插入图片描述
代码：

<!-- 自定义导出 -->
<template>
  <div class="site-container ml-0">
    <div class="main-site-card search-bar main-site-card-base">
      <div class="top-bar">
        <el-button plain icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        <span class="top-title">自定义导出</span>
        <el-button type="primary" @click="exportFun">导出</el-button>
      </div>
    </div>
    <div class="org-menu-tree-title">
      <div class="org-menu-tree-title-split"></div>
      <div class="title-split">请选择导出表头</div>
    </div>
    <div class="card">
      <div class="title-split">
        已选择表头
        <span class="title-split-little">
          可
          <span class="blue">拖拽</span>调整表头顺序
        </span>
        <p class="clear-btn cur-p" @click="clearAllFun">清空已选择</p>
      </div>
      <draggable
        v-model="ytabList"
        chosenClass="chosen"
        forceFallback="true"
        group="tag"
        animation="1000"
        @start="onStart"
        @end="onEnd"
      >
        <el-tag
          :class="item.status === 1 ? 'info-tag' : 'item-tag'"
          v-for="(item, index) in ytabList"
          :key="index"
          :type="item.status === 1 ? 'info' : ''"
          :closable="item.status === 1 ? false : true"
          @close="delytabList(index, item)"
        >{
  
  { item.name }}</el-tag>
      </draggable>
    </div>

    <div class="card">
      <div class="title-split">未选择表头</div>
      <el-tag
        class="cur-p n-info-tag"
        v-for="(item, index) in ntabList"
        :key="index"
        @click="addytabList(index, item)"
        type="info"
      >{
  
  { item.name }}</el-tag>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import api from "@/api";

export default {
    
    
  data() {
    
    
    return {
    
     drag: false, ytabList: [], ntabList: [] };
  },
  methods: {
    
    
    getTabList() {
    
    
      this.ytabList = [
        {
    
     name: "标签1", status: 1 },
        {
    
     name: "标签2", status: 1