从0到1完成一个Vue后台管理项目（二十二、列表拖拽排序SortableJS）

最新推荐文章于 2023-08-17 16:32:10 发布
最新推荐文章于 2023-08-17 16:32:10 发布
阅读量530 收藏 3
点赞数
分类专栏： 从0开始创建vue项目 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59816940/article/details/128646588
版权

往期

从0到1完成一个Vue后台管理项目（一、创建项目）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）

从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）

从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））

从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）

从0到1完成一个Vue后台管理项目（六、404页）

从0到1完成一个Vue后台管理项目（七、Header、Footer、页面布局）

从0到1完成一个Vue后台管理项目（八、Menu改造完善、子组件创建、配置路由）

从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）

从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）

从0到1完成一个Vue后台管理项目（十一、前端分页实现）

从0到1完成一个Vue后台管理项目（十二、学生table列表删除、查询、重置）

从0到1完成一个Vue后台管理项目（十三、信息列表页面实现：对话框新增、DateTimePicker 日期时间选择器）

从0到1完成一个Vue后台管理项目（十四、对话框封装、接口联通、api优化 很重点（封装思想））

从0到1完成一个Vue后台管理项目（十五、作业列表、表格数据方法的封装）

从0到1完成一个Vue后台管理项目（十六、后端分页方法以及分页组件的封装以及复用）

从0到1完成一个Vue后台管理项目（十七、使用Echarts：柱状图、折线图）

从0到1完成一个Vue后台管理项目（十八、基础地图绘制）

从0到1完成一个Vue后台管理项目（十九、地图区域样式设置、区域文字和立体设置）

从0到1完成一个Vue后台管理项目（二十、地图涟漪、线图）

从0到1完成一个Vue后台管理项目（二十一、网上地图资源、树形控件及路由权限分析、路由守卫）

安装SortableJS

cnpm install sortablejs --save

官网：Sortable.js中文网 (sortablejs.com)
这是翻译过来的，所以我看到了有趣的一幕
在这里插入图片描述

在这里插入图片描述

引入

在这里插入图片描述

使用

在这里插入图片描述

我们加一个排序的按钮，并且给这个按钮加个图标和类名，这个类名很重要，用来做拖拽的时机

在这里插入图片描述

我们在mounted的时候使用，因为这个时候列表的dom结构是加载完了的

在这里插入图片描述
具体的API大家去看文档即可

onEnd是拖拽后的处理，这个一般需要对接后台去处理，所以这里的仅供参考，具体需要看你们的业务

在这里插入图片描述

林多多@
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery-sortable.js的使用，后台双向列表排序
weixin_40607363的博客
04-28 2466
引入js：<script type="text/javascript" src="${base}/js/commons/jquery-1.11.0.min.js" charset="utf-8"></script><script type="text/javascript" src="${base}/js/jquery-sortable/jquery
vue.draggable实现表格拖拽排序效果
10-17
在本文中，我们将深入探讨如何利用Vue.js框架中的vue.draggable组件来实现一个表格拖拽排序的效果。通过这个实现，我们能够提供一个交互性更强、用户体验更佳的界面。 首先，关于vue.draggable的实现原理，它依赖于...
Vue3中的列表(表格)拖拽排序
Roy__Jason的博客
07-05 4721
【代码】Vue3中的列表(表格)拖拽排序。
关于使用Sortable来实现表格的拖拽遇到的问题
走在路上的张先森
07-27 3676
引入 npm install sortablejs --save 按需引入 import Sortable from ‘sortablejs’; 方法一： 1.首先是拖拽完成之后需要重新调用列表的接口 2.el-table里面绑定一个key，在刷新数据的时候取反 方法二： 异步再次执行一次表格数据的赋值，推荐使用这种，看似呆板，但是易懂！！！ 注意： 这里排序会调用一个接口，我们不要忽略了接口调用失败的数据处理，不然数据的顺序会改变与后台的数据不一致 代码 <template>
可拖动JsAdmin后台管理系统模版
02-20
可拖动JsAdmin后台管理系统模版 比较实用的，欢迎大家下载
vue管理后台列表实现拖拽
m0_56804390的博客
02-14 422
1、引入js方法 "sortablejs": "^1.14.0", npm install sortablejs --save import Sortable from 'sortablejs' 2、 rowDrop() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { ...
vue中实现菜单栏的拖拽
wxFather的博客
09-10 4912
                                      金秋九月，秋风飒爽，莺莺燕燕，万恶复苏，彼时到处都是一片欣欣向荣的景象，阳光柔和的像是基佬的手，轻轻抚摸在你的屁股上，大家都笑容满面，脸上堆满了油。 除了程序员。 在接到做拖拽菜单栏的时候，我的心里毫无波动甚至还有点想做一个大保健。 于是找轮子--&gt;404。 好吧，果然沙雕网友都靠不住，自己造。 （看了...
vue 实现基础的拖拽排序
pspxuan的博客
11-10 1309
主要使用下面三个事件绑定 @dragstart=func(index, e) 开始拖元素触发，作用于拖拽元素， index为拖拽开始的位置 @dragover=func(index, e) 当元素拖动到drop元素上时触发，index为拖拽结束的位置 @drop=func(index, e) 当元素放下到drop元素触发，index为拖拽结束的位置 我主要是使用 @dragstart 以及 @drop 这两个事件 // html <li v-for="(item, in
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
10-16
Sortable.js 是一个用于元素拖放排序的JavaScript库，它支持列表项的拖动排序，并且能够通过简单的配置快速集成到各种项目中。 在本文中，将结合ElementUI表格组件和Sortable.js库来演示如何实现一个可拖拽的表格行...
element-ui ruoyi 图片上传可拖拽调整顺序组件
最新发布
04-20
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue.js 的开源组件库，而Ruoyi则是一个轻量级的后台管理系统框架。这个组件的实现主要涉及到以下几个关键知识点： 1. **Element UI组件库**： Element UI ...
非常好用的可视化拖拽编辑模板网站后台
01-02
无需代码，自由拖拽布局，适应所有设备。 鼠标拖动，即可完成网站设计制作。
vuedraggable+element ui实现页面控件拖拽排序效果
10-17
主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
sortable+element 实现表格行拖拽的方法示例
10-16
在开发Vue项目时，有时需要实现表格行的拖拽功能以增强用户体验，特别是在需要手动调整数据顺序的场景下。本文将详细介绍如何结合sortable.js和Element UI的el-table组件来实现这一功能。 首先，Sortable.js是一个...
vue2 vuex 中使用 sortablejs 拖拽库
tangshangkui的专栏
05-12 666
在vue2 vuex 中直接使用 sortablejs 拖拽库会有bug因为 sortablejs 会自动修改 html dom, 然后用户在 onUpdate 中修改数据后,vue会重新渲染.2次修改dom 会导致dom顺序混乱(我遇到了这个问题)
vue2关于列表拖拽效果
LiuXiaodong2020的博客
06-20 497
tabList拖拽
分享一个后台管理系统可拖拽式组件的设计思路
前端达人
08-09 890
在后台管理系统的项目中，因为是数据管理，大部分都是 CURD 的页面。比如：image.png对于这类的页面，我们完全可以设计一个组件，使用拖拽的方式，将组件一个个拖到指定区域，进行结构组装，然后再写一个对组装数据的渲染组件，渲染成页面即可。如下：image.png需要处理的问题数据结构的组装组件列表的选择组件的拖拽处理组件的配置信息配置请求的处理下拉选项数据的处理tab...
vue之排序后端排序功能的实现
jin415147的博客
08-17 544
/ 这里的url就变成了http://xxx.xxx.xxx.xxx/xxx/?// 因为获取数据函数里面axios传入的参数使用的是filters，所以将排序字段也放到filters中，这样最后的效果就是。// 这里发送的请求是： http://xxx.xxx.xxx.xxx/xxx/?// 如果当前点击的列已经是排序状态，且当前排序为正序，则变为逆序排序。// 如果当前点击的列已经是排序状态，且当前排序为逆序，则取消排序。
html5拖动监听
weixin_30537391的博客
08-07 935
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被...
Vue中如何进行拖拽与排序功能实现
u013749113的博客
06-14 3906
是一个Vue.js的拖放和排序列表组件。它基于库，可以用于实现拖放、排序、带有动画效果的过渡以及其他特性。支持Vue.js 2.x和3.x，可以在任何现代浏览器和移动设备上使用。还支持自定义拖放元素，可以用于实现更复杂的拖放和排序功能。下面是一个例子：return {return {} .clone {} .drag {} .text {flex : 1;
vue后台管理系统项目从0到1
08-25
Vue后台管理系统项目从0到1，可以按照以下步骤进行： 1. 创建项目：首先，使用Vue CLI工具创建一个新的Vue项目。可以使用命令行或图形界面工具来完成这一步骤。 2. 设计界面：根据需求，设计后台管理系统的界面。可以使用UI组件库（如Element UI、Ant Design Vue等）来加快开发速度。 3. 路由配置：使用Vue Router来配置路由，定义页面之间的跳转关系。可以根据后台管理系统的功能模块进行划分，设计合理的路由结构。 4. 数据管理：使用Vuex来管理全局的状态和数据。可以定义各个模块的状态、获取数据的方法，并在组件中使用。 5. 接口调用：根据后台管理系统与后端API的交互需求，使用Axios或其他HTTP请求库来发送请求并处理响应数据。 6. 功能开发：根据需求逐步开发各个功能模块。可以按照模块划分，分别开发不同的页面和组件。 7. 数据展示：根据后台管理系统的需求，使用Vue组件来展示数据，例如表格、图表等。可以使用第三方库来提供更多扩展功能。 8. 权限控制：根据需求，实现后台管理系统的权限控制功能。可以使用路由守卫、角色权限配置等方式来限制用户的操作权限。 9. 测试和调试：完成功能开发后，进行测试和调试，确保后台管理系统的稳定性和可靠性。 10. 打包部署：最后，使用Vue CLI提供的打包命令，将项目打包为静态文件，并部署到服务器上。 通过以上步骤，你可以从零开始构建一个Vue后台管理系统项目。当然，在实际开发中还会遇到各种具体问题和挑战，需要根据具体情况进行解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林多多@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值