vue 循环出的div拖拽排序和回显

最新推荐文章于 2024-02-29 14:19:08 发布

Artsman

最新推荐文章于 2024-02-29 14:19:08 发布

阅读量548

点赞数 3

分类专栏：前端开发技术文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Liu_JiaqiPro/article/details/121006675

版权

本文介绍了如何在Vue项目中使用vue-class-component和vue-property-decorator插件实现div元素的拖拽排序功能。通过在循环体外包裹transition-group，并为循环体内的元素定义drag属性及相关方法，实现了拖拽过程。具体样式可根据需求自定义。

摘要由CSDN通过智能技术生成

效果如下

一、下载插件

下载vue-class-component和vue-property-decorator两个插件，然后重跑项目

npm install --save vue-class-component
npm install --save vue-property-decorator

二、准备自己的循环体。我举我的例子

循环体外面要包裹transition-group标记

循环体要声明drag的一个属性和四个方法

<transition-group class="transition-wrapper" name="sort">
        <div
          class="between title"
          style="margin-top: 24px; font-weight: 600; font-size: 16px"
          v-for="(item, index) in List"
          :key="item.crypto"
          :draggable="true"
          @dragstart="dragstart(item)"
          @dragenter="dragenter(item, $event)"
          @d