vue：使用【3.0】：拖拽数据

最新推荐文章于 2025-06-12 15:50:03 发布

原创

最新推荐文章于 2025-06-12 15:50:03 发布 · 803 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

1、参考链接：vue.draggable中文文档 - itxst.com

2、想要实现的效果图：红框内容可以拖拽

3、安装

yarn add vuedraggable@next
npm i -S vuedraggable@next

4、代码

<template>
    <draggable
      :list="columns"
      ghost-class="ghost"
      chosen-class="chosenClass"
      animation="300"
      class="chooseMain"
    >
      <template #item="{ element, index }">
        <div class="card mr-10px">
          <div class="box mb-10px">
            <div class="left mr-10px">
              <div class="border"></div>
              <div class="txt">{
  
  { element.label }}</div>
            </div>
            <div clas