vue项目中使用拖拽排序实现无刷新组件更改排序的办法

最新推荐文章于 2024-06-27 11:10:34 发布
原创 最新推荐文章于 2024-06-27 11:10:34 发布 · 827 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

项目中使用vuedraggable插件进行拖拽排序，拖拽后组件会重新创建，体验不佳。作者通过研究v-for原理，发现就地复用策略是解决问题的关键。只要v-for循环中的key保持唯一，组件就不会重新渲染，从而实现无刷新组件拖拽排序。

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

一个项目中拖拽排序使用的插件是vuedraggable，由于拖拽之后排序变化，通过v-for循环出的组件会重新创建，体验很不好，找了很多方法都没能解决无刷新组件更改排序，直到想起来看下v-for的原理。

在vue中，通过v-for来渲染一个数组列表时，现在都需要传属性key，因为之前一直没太用到这相关的，所以key值我一直是用的index或者是随机字符串+index定义的，直到这次出的问题，才真正了解key的作用。

在这里插入图片描述

就地复用策略就是解决本问题的关键点，在v-for循环的列表顺序改变时，只要key还是那个唯一的，对应的组件就不会重新渲染一遍，自然也就实现了无刷新组件拖拽排序的功能。

果然在写代码的过程中，要多思考，多了解原理，才能更好的完成代码编写。

参考文章：了解一下v-for原理

vuedraggable递归组件无法触发set的坑以及松手后再更改元素位置
q975470633的博客
05-12 780
需求是做一个目录的和富文本的结合，目录可通过拖拉拽进行内容区的标题以及子元素变化。 右侧是平级数据结构，左侧需要转成树形结构。 也就是说本来两个组件共享同一个v-model的数据，现在需要进行一个中间层的处理，所以用到了下面说的watch。 目录用到的是vuedraggable + 递归组件 + computed的get，set。 首先需要监听来自富文本的平级数据结构value的变化，按之前的经验来说vuedraggable会提供数据更改的监听方法，但是他是直接操作的数据，官网demo用的computed。
vue3+ts+vite 封装的 图片裁剪组件 弹幕组件 表情包组件 loading组件 拖拽排序组件 日历组件 消息提示组件 等...
最新发布
xiaobaibai_____的博客
10-25 967
这个组件库使用 的技术栈 是vite+vue3+ts 开发，所以这个只项目支持vue3项目使用。
Vue3 sortablejs 表格拖拽后，表格无法更新的问题处理
u013776700的博客
06-27 1471
你可能会发现，表格排序是可以实现，但是我们基于数据驱动的vue中关联的数据并没有发生变化， 如果你的表格带有列固定(固定列实际上在dom中有两个表格，其中固定的列在一个表格中，其他表格再另一个表格中)，如果你再固定列加的拖拽，只变固定列，其他非固定列并不变，或者你在非固定列增加了拖拽，但是固定列却也不变化。你会发现，固定列拖拽，位置变了，但是非固定部分，却不会跟着变化。这样就完成了，退拽后，无论是拖拽固定列或者非固定列，基于vue的数据驱动实现重新渲染排完序的表格。如上图，这就是带有固定列。
vue 列表更改排序，不刷新问题
笔记
07-02 1848
原因： 由于 JavaScript 的限制，Vue不能检测数组和对象的变化。深入响应式原理中有相关的讨论。 <div class="basket-paper-content" v-if="reset"> <div class="basket-paper-item-box" v-for="(item,index) in current_list" :key="index"> <div class="paper-item-box-titl.
sortable.js 插件拖拽后视图出错解决
liuxiang15的博客
10-16 1624
问题说明： vue+element-ui+sortable实现el-table拖拽功能 结果拖拽后发现数据更新了，视图没更新 行拖拽代码： /** * 行拖拽 */ rowDrop () { // 此时找到的元素是要拖拽元素的父容器 const tbody = document.querySelector('.el-table__body-wrapper tbody')
vuedraggable遇到的问题
xinxin_csdn的博客
10-15 2177
原因2、draggable组件必须直接包含v-for: draggable包在ul外层就出现了这个问题。原因：外层的父组件使用了vue-draggable-resizable组件封装的可拖拽的弹框组件。二、拖拽后位置未发生变化：@start、@end事件都执行。原因1、draggble绑定的v-mode和下方列表不一致。一、拖拽无效：触发@start事件，但不执行@end方法。
【Vue+ElementUI】Table表格实现自定义表头展示+表头拖拽排序（附源码）
cnsv的博客
03-08 3583
【Vue+ElementUI】Table表格实现自定义表头展示+表头拖拽排序（附源码）
Vue项目开发流程详解与排序插件使用
文件中提到了使用sortablejs库来实现单词顺序的拖拽式更改。sortablejs是一个JavaScript库，专门用于创建拖拽排序的交互效果，非常适合实现像列表项排序这样的功能。 对于GET请求的实现，文件中提到了使用axios库。...
Vue实现table上下移动功能示例
10-17
Vue实现表格上下移动功能涉及了几个关键知识点，包括使用Element UI组件库，如何利用Vue的响应式系统动态操作数据以及如何在不刷新页面的情况下更新视图。下面是详细的知识点解析： 1. **Element UI组件库**： ...
Vue.js中拖拽功能的实现技巧：深入Draggable组件
本文详细探讨了Vue.js中Draggable组件的实现原理、性能优化策略以及在实际项目中的应用。通过分析Draggable组件的基本概念和核心实现，包括基础拖拽事件的处理和高级交互，我们揭示了组件在前端开发中的重要性。接着...
vue 不同数组的拖拉拽
weixin_45646663的博客
11-30 322
拖拉拽
vue3+vuedraggable 实现重排数组对象顺序
qq_32944491的博客
03-14 1041
vue3+vuedraggable 实现重排数组对象顺序
easyUI JQuery 里 Dialog重新加载DIV，datagrid不能及时刷新问题
weixin_30472035的博客
02-14 574
很久没有写东西了，原本上周打算写点记录一下遇到的问题的，但是由于时间和自己的惰性问题，没有及时写。现在来补上。 近期做了个需求，上周在测试的时候发现了几个问题，先来记录这个Dialog的div不能及时刷新的问题，这个问题在ie版本比较高的情况下不会出现，只有在ie9及以下的版本才会出现。 粘一下jsp页面这个dialog的写法，如下： 1 <div id='dial...
vue 使用vuedraggable实现拖拽排序功能，及复拖拽后复原的解决
weixin_39818813的博客
02-29 5645
1.安装依赖 npmi-Svuedraggable 2.引入依赖 import vuedraggable from 'vuedraggable'; 3.注册组件 components: { vuedraggable }, 4.使用 <vuedraggable class="wrapper" v-model="list"> <tra...
#Vue2篇：vuedraggable拖拽点击事件失效问题
...
04-21 4351
该道具用于将附加信息传递给标记道具声明的子组件。attrs：要传递给子组件的 attrs。props：要传递给子组件的道具。on：子组件中要订阅的事件。
vue脚手架-上传图片 图片拖拽(draggable)、更新（四）
唯心所现，唯识所变
12-22 1672
目录： 一、拖拽 二、更新 先来看下效果，是不是你想要的吧~ 现在把第四张，拖拽到第二张的位置，是以插入的形式进行的哦 开始的时候，预备着就是做个上传、删除的功能，到了后面公司又新增了需求，要求拖拽来改变排序。于是我就想着像这种拖拽的应该会有个插件，然后就找到了这个插件 Vue.Draggable ，我是通过这个来了解draggable的。然后在网上也看了别人的例子，然后很多人的都是把显示图片 添加 删除那些都暴露了出来，意味着我之前写的代码都可能得重写，加上我实现得这个不是就是个上传功能的图片墙，当然
vue可拖拽排序列表组件
u011295864的博客
11-12 986
vue可拖拽排序列表组件
Vue2 _ 实现拖拽功能
Mr.小灰狼_随笔
12-29 1万+
Vue.Draggable 是一款基于 Sortable.js 实现的 Vue 拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖 jQuery 为基础、Vue 2过渡动画兼容、支持撤销操作。
记录Vue.Draggable拖拽组件的使用历程
热门推荐
Mr.小灰狼_随笔
07-07 2万+
记录Vue.Draggable使用历程 Vue.Draggable 是一款基于 Sortable.js 实现的 vue 拖拽插件。 支持 移动设备、拖拽 和 选择文本、智能滚动 ， 可以在 不同列表间 拖拽、不依赖 jQuery 为基础、vue 2 过渡动画兼容、支持撤销操作 ， 总之是一款非常优秀的 vue拖拽组件 。.........
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值