Sortablejs拖拽插件 - 腾讯云开发者社区

文章/答案/技术大牛

发布

sortablejs插件在el-table中的运用

sortablejs插件在el-table中的运用概述需求有一个Table表格，由于数据是根据自增的ID进行排序显示的，有时了调整顺序会在数据库中直接操作数据表，来达到调整数据顺序的目的，因为为了实现在页面实现较为简单的拖拽排序...最后sortablejs插件可以满足需求并可以快捷的实现功能。...参看资料：官网：http://www.sortablejs.com/ 中文文档：https://www.itxst.com/sortablejs/neuinffi.html 1、安装sortablejs...插件首先引入依赖，并重启项目 npm install sortablejs --save 2、实现效果首先看下实现的效果如下： 1、这是原来的顺序：[1, 2, 3, 4] 2、通过鼠标拖拉即可改变位置...: [4, 3, 1, 2] 3、编写vue页面(文末有完整页面) 3.1、在需要编写排序的页面引入sortablejs依赖 import Sortable from 'sortablejs';

2.1K5 0

js拖拽框选插件

分享一个js的拖拽框选插件官网：https://dragselect.com/ 源码：https://github.com/ThibaultJanBeyer/DragSelect.git 使用： pnpm

19.1K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

使用 Sortable.js 库实现 Vue3 elementPlus 的 el-table 拖拽排序

本文将介绍如何在el-table组件中集成拖拽排序，使数据管理更加直观和高效。...触摸友好：针对移动端优化，能够在触摸屏设备上提供流畅的拖拽体验。...模块化设计：Sortable.js采用模块化结构，开发者可以根据实际需求选择导入核心库或是包含所有插件的完整版本，有助于控制最终打包文件的大小。...下载依赖 npm i sortablejs @types/sortablejs 添加类名首先给 el-table 加上类名：class="elTable" 导入sortablejs //导入sortablejs import Sortable from 'sortablejs'; 初始化拖拽实例 const initSort

6.3K1 1

(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

--save 导入 // Default SortableJS import Sortable from 'sortablejs'; // Core SortableJS (without default...all plugins) import Sortable from 'sortablejs/modular/sortable.complete.esm.js'; 插件导入 // Cherrypick...pull, put 可以为 funtion 这个就扩大了拖拽放置的功能了，显得没那么死板，为什么呢？...这些插件是默认插件，并包含在Sortable的默认UMD和ESM版本中 import { Sortable, OnSpill } from 'sortablejs/modular/sortable.core.esm...交换插件该插件修改了Sortable的行为，以允许项目彼此交换而不是进行排序。一旦开始拖动，用户就可以将其拖动到其他项目上，并且元素不会发生任何变化。但是，用户放置的项目将与原始拖动的项目交换 ?

9.2K1 0

尤雨溪推荐的拖拽插件，支持Vue2Vue3

大家好，我是「前端实验室」爱分享的了不起~ 今天在网上看到尤雨溪推荐的这款拖拽组件，试了一下非常不错，这里推荐给大家。说到拖拽工具库，非大名鼎鼎的的 Sortablejs 莫属。...但我们直接使用Sortablejs的情况很少，一般都是使用基于它的封装工具。今天推荐的 VueDraggablePlus 亦是如此。...关于 VueDraggablePlus VueDraggablePlus 是一个专为 Vue 打造的拖拽排序模块，基于 Sortablejs 封装，支持 Vue3 或 Vue 2.7+。...在任何元素上使用拖拽列表在 Sortablejs 官方以往的 Vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表。...它可以让你在任何元素上使用拖拽列表，我们可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 Sortablejs 的 container。这样我们就不用自己再包一层啦。

13.8K1 1

VUE.DRAGGABLE实现从左到右拖拽功能

功能描述： 1、左边【一级、二级、三级】字样是不能拖拽的，【item1、item2…】可以拖拽 2、左边items位置固定，只能向右拖拽，不能上下拖拽，如：item7从左边拖到右边，左边的item7消失...，右边增加item7 3、右边items可以自由拖拽，但不能向左拖拽 4、右边items可以删除，如：点击item7的“×”，右边item7消失，左边item7出现 5、重置时，页面回复初始化状态实现方法...Vue.Draggable插件，下载地址：https://github.com/SortableJS/Vue.Draggable#start-of-content 演示地址：https://sortablejs.github.io...’从左向右克隆，后面用右边draggle插件的dragChangeR()方法让左侧数据隐藏了，left并不是真正的删除这条数据；put: false 禁止从右向左拖放数据 } :move=”checkMove...” 移动时绑定checkMove方法，判断是上下还是向右移动，上下时，不执行拖拽；向右时，执行 5、右边draggle插件的deleteItme(element,index)方法实现删除时，right数据

1.8K3 0

ElementUI 基于vue+sortable.js实现表格行拖拽

基于vue+sortable.js实现表格行拖拽实践环境 sortablejs@1.13.0 vue@2.6.11 element-ui@2.13.2 安装sortable.js拖拽库 npm install...sortablejs 代码示例 import Sortable from "sortablejs...1)，在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex)，视觉效果就是在after位置(即目标位置对应行下方)插入被拖拽行 * 如果从下往上拖拽，即newIndex...} } }; .demo-table-wrapper { } 参考连接 http://www.itxst.com/sortablejs

4.4K1 0

table表格拖拽

el-table 的拖拽使用 Sortable.js 官方文档 :https://github.com/SortableJS/Sortable 1....通过 npm 使用 sortable //安装sortablejs npm install sortablejs --save //引用 sorttablejs import Sortable from...'sortablejs' 2.用法 SorRow() { // 获取表格row的父节点 const tbody = this....* 但引出新的问题：表格重渲拖拽事件丢失，导致之后无法拖拽 * 于是我在表格重渲之后重新调用拖拽方法创建拖拽实例，功能正常 * **/ this.key...template> import Sortable from "sortablejs

3.6K2 0

Vue 中使用拖拽排序插件 Awe-dnd

安装插件 npm install awe-dnd --save 2. 引入插件 import VueDND from 'awe-dnd' Vue.use(VueDND) 3....使用插件 <div v-dragging="{item: item, list:list...{id:5,name:"这是第五个标题名称"}, ], }; }, mounted() { // 拖拽事件

9991 0

这几个拖拽库真心推荐

大家好，我是「前端实验室」爱分享的了不起~ 拖拽在前端领域中已经是一个非常常见的交互方式了，今天给大家介绍几个拖拽库，不仅可以提高提高效率，还可以使你的拖拽效果更加丝滑~ Vue.Draggable...Vue.Draggable是一个基于Vue.js的可拖拽组件库，用于实现拖拽和排序功能。...Github链接：https://github.com/SortableJS/Vue.Draggable Github Star：19K Sortable.js Sortable是一个功能强大且易于使用的...Github链接：https://github.com/SortableJS/Sortable Github Star：27.1K dragula dragula是一个轻量级的JavaScript库，用于实现页面元素的拖拽操作...它支持将元素拖拽到不同的容器，并提供了可自定义的拖拽事件和处理程序。dragula非常易于集成和使用，适用于一般的拖拽需求。

3.3K2 0

dragula插件web端和移动端的拖拽排序

Dragula简介 Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单，浏览器兼容性好，能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。...如果元素被放置在containers列表元素之外，插件将取消revertOnSpill和removeOnSpill选项。注意：拖拽事件只会发生在用户鼠标左键点击的时候，并且没有meta键被按下。...如果点击的是按钮或超链接元素，拖拽事件也会被忽略。下面的例子允许用户将元素从left容器拖放到right容器，或从right容器拖放到left容器中。...如果该方法返回的是false，拖拽事件将不会开始，事件也不会被阻止。...事件名称参数描述 drag el, container el 从container中被拖拽 drop el, container, source el被放置到container

3.7K1 0

树形图拖拽插件tree-drag | 开源项目推荐

前言好多天前，领导让我实现一个树形图拖拽插件，这个插件用来描述各部门领导与员工之间的关系，每个父节点显示其子结点数量，拖拽任意一个叶结点上的人到另一个结点，他们之间的关系发生改变，树形图重新渲染。...难点分析实现可拖拽树形图可拖拽树形图的实现，也是本插件的核心功能，根据dom的特定规则构建树，实现拖拽功能，拖拽功能我使用的是JQueryUI提供的方法，获取当前拖拽结点和目标结点的原始dom，重新构建树...❞ 项目目录 plugins 插件目录 jquery 存放jquery相关文件 jqueryui 存放jqueryui相关文件 treeDrag 树形拖拽插件实现相关文件 src treeDragData.json...渲染树形结构的json数据 css 插件内用到的css文件 js 插件内用到的js文件 assets 静态资源存放目录 config 树形结构渲染需要的文件 index.html 树形拖拽插件演示DEMO...--树形拖拽插件--> <!

3.2K2 0

手写实战应用：Vue拖拽插件的应用与选择

介绍图片vue-drag-resize是一个用于拖拽，缩放的组件根据网上搜索到的使用教程，都是照着文档翻译了一遍，根本解决不了我想要的问题花了几天时间，于是记录下了这个组件的一些使用教程简单使用限制拖拽范围修改组件的默认样式拖拽的层级拖拽的点击事件安装使用图片...vue-drag-resize是一个专门用于vue项目的拖拽组件,定义元素可拖拽，或者可缩放，或者二者兼有;可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素;并且支持触摸事件安装npm i -s vue-drag-resize... :isResizable="false"> 此文主要介绍拖拽！！！...限制拖拽范围如果不设置拖拽范围，可以在整个页面进行拖拽图片可以使用parent-limitation限制只在父元素内拖动也可以手动设置拖拽范围的宽高parentW,parentH//指定只在父元素内拖动...为了适配不同的电子白板，以往我们都是规定以rem为单位，但是，插件传入的数据都是以px为单位的，根本无法适配不同的屏幕所以，这个时候手写一个拖动元素，才是最为安全的。

8243 0

前端里的拖拖拽拽了解一下？

最近在项目中使用了 react-dnd[1]，一个基于 HTML5 的拖拽库，“拖拽能力”丰富了前端的交互方式，基于拖拽能力，会扩展各种各样的拖拽反馈效果，因此有必要学习了解，最好的学习方式就是实操！...拖拽交互常见于各种前端编辑器里，而“编辑器”是一个集成前端技术能力的综合性工程，其中就会涉及到各种形式的拖拽交互，因为“拖拽”是提升用户体验的重要交互方式，所以需要对拖拽的交互效果做各种定制化，作为开发者理应熟练掌握.../atlassian/react-beautiful-dnd/ sortablejs: https://sortablejs.github.io/Sortable/ react-sortable-hoc...: https://github.com/clauderic/react-sortable-hoc/ 关于几者的差异，可以参阅：《关于react中使用拖拽插件的评测[4]》四、总结由于低代码平台其实会有丰富的拖拽场景...draggable [3]DataTransfer - MDN: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer [4]关于react中使用拖拽插件的评测

6.7K3 0

完结篇！React19+Arco+Zustand仿macOS风格webOS桌面系统

2026年8月实战React19.2+Zustand5+Arco+Sortablejs仿macOS/windows风格网页版os平台系统ReactWebOS。...react-router v7+zustand5组件库：@arco-design/web-react^2.66.16 (字节网页版vue3组件库)状态管理：zustand^5.0.15滚屏组件：swiper^14.1.0拖拽插件...：sortablejs^1.15.7图表组件：echarts^6.1.0模拟数据：mockjs^1.1.0构建工具：vite^8.2.0项目特点支持macOS+window两种桌面模式全新栅格化桌面菜单...桌面/Dock菜单支持动态JSON配置⚡️ 支持桌面菜单和dock菜单自由拖拽排序⚙️ 支持自定义桌面主题皮肤、毛玻璃模糊质感一款os式后台admin管理系统解决方案项目框架结构react-os使用

1972 0

tauri2.0-winos基于vite6+tauri2+vue3客户端os系统

3.5.13+vue-router^4.5.0跨平台框架：tauri^2.1.1UI组件库：@arco-design/web-vue^2.56.3 (字节桌面版vue3组件库)状态管理：pinia^2.3.0拖拽插件...：sortablejs^1.15.6滑动分屏插件：swiper^11.1.15图表组件：echarts^5.5.1markdown编辑器：md-editor-v3^5.1.1模拟数据：mockjs^1.1.0tauri2...-vue3os支持多窗口管理、自定义拖拽栅格桌面引擎、分屏指示器管理、自定义桌面壁纸等功能。.../App.vue'// 引入插件配置import Plugins from './plugins'// 引入路由/状态配置import Router from '....本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标 * path 跳转路由页面 * link 跳转外部链接 * hideLabel 是否隐藏图标标题 * filter 是否禁用拖拽

1.1K2 0

【RuoYi-SpringBoot3-ElementPlus】：若依前端增强版 —— 功能扩展优化

核心特点：✅保留若依所有功能，无缝替换✅新增8+实用业务组件✅集成主流工具库和插件✅开发工具链完善✅支持三级等保安全标准二、新增功能2.1省市区级联选择器——中国行政区划完美方案痛点：项目中经常需要用户选择地址...emitter.emit('refresh',{id:123})//组件B：监听事件emitter.on('refresh',(data)=>{console.log('收到刷新事件',data.id)})4.4sortablejs...——拖拽排序强大的拖拽库，支持列表、表格、卡片等场景。...divv-for="iteminlist":key="item.id">{{item.name}}importSortablefrom'sortablejs'import...、视频、大文件日期处理❌dayjs轻量级，仅2KB事件总线❌mitt组件通信PDF预览❌pdf-vue3在线预览拖拽排序❌sortablejs拖拽功能移动端UI❌Vant移动端适配工具函数❌xe-utils300

1K1 0

用 Vue 做一个轻量离线的“待办清单 + 情绪打卡”小工具

它支持拖拽管理每日任务、记录情绪状态、图标标记、情绪色彩化展示，还能导出每日小结报告——更重要的是，它完全离线可用，适合放在你的浏览器书签里，随时点开就能用。...整体功能设计模块划分任务管理：可添加、修改、删除、拖拽任务情绪记录：支持 5 种情绪打卡（开心、平静、焦虑、难过、生气）日历面板：显示每日任务 + 情绪状态（颜色小圆点）离线存储：使用 IndexedDB...保存所有数据每日小结导出：自动生成报告，支持导出 Markdown技术选型框架：Vue 3 + Composition API状态管理：组合式响应式变量本地存储：IndexedDB（使用 idb 库简化操作）拖拽交互...：SortableJS导出功能：使用 Blob 下载 Markdown 文件界面原型设计首页结构顶部：今天日期 + 情绪选择（图标按钮）中间：待办任务列表（支持添加、删除、拖拽排序）底部：导出今日总结按钮...+ 实时保存// 使用 Sortable.js 实现任务拖拽并保存新顺序import Sortable from 'sortablejs'onMounted(() => { Sortable.create

7200 0

根据公司的业务需求我是如何封装组件的

最后，我还是决定自己封装一个多功能的 table 组件吧.......功能需求如下：1.表格数据的树形渲染并且同个父级下的同层级可拖拽，不同层级无法完成拖拽。...2.表格行可操作（ps：比如编辑，删除，查看详情）3.表格的顶部可操作（ps:展开，排序）4.表格尾部可分页 5.表格可多选（ps：表格带复选框）多功能的表格组件安装插件 npm install element-ui...sortablejs -S 在项目中我是使用sortablejs实现拖拽的，以及使用elemnt-ui的分页组件实现分页的功能。...给每一个递归组件绑定一个ref属性，那么通过 new Sortable 实例实现同层级的拖拽（这里的同层级就是相同层级节点并且同个父节点的可互拖）。...其实在分析这个需求的时候，我也曾尝试去找资源，但发现基本上都是文件夹一样的拖拽功能...所以，我后来就决定自行封装。

4.3K1 0

js拖拽-javascript拖拽缩放示例

一、两种主流实现方式方式 1：使用 HTML5 原生 Drag & Drop API（推荐用于跨容器拖拽）✅ 标准化，浏览器原生支持✅ 支持文件拖入、跨 iframe 拖拽❌ 事件模型复杂，样式控制受限...❌ 移动端兼容性差方式 2：基于 mousedown mousemove mouseup 的自定义拖拽（推荐用于 UI 组件内部拖拽）✅ 完全可控，性能高✅ 可精细控制动画、边界、吸附等效果✅ 兼容性极佳...“抓”在点击点在 document 上监听 mousemove/mouseup 避免鼠标移出元素后失效三、高级拖拽：可拖拽、可冻结、可编辑、可排序如我早期另一篇文章-用JS/HTML/CSS 构建可拖拽...总结场景推荐方案表格行/列排序、看板卡片移动✅ mousedown + mousemove 自定义拖拽文件上传、跨应用拖拽⚠️ HTML5 Drag & Drop API复杂物理效果（...磁吸、弹簧）结合 requestAnimationFrame + 自定义逻辑记住核心公式：拖拽位置 = 鼠标当前位置 - 初始偏移量掌握这一原则，你就能构建任何拖拽交互。

6262 1

点击加载更多

sortablejs插件在el-table中的运用

js拖拽框选插件

使用 Sortable.js 库实现 Vue3 elementPlus 的 el-table 拖拽排序

(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

尤雨溪推荐的拖拽插件，支持Vue2Vue3

VUE.DRAGGABLE实现从左到右拖拽功能

ElementUI 基于vue+sortable.js实现表格行拖拽

table表格拖拽

Vue 中使用拖拽排序插件 Awe-dnd

这几个拖拽库真心推荐

dragula插件web端和移动端的拖拽排序

树形图拖拽插件tree-drag | 开源项目推荐

手写实战应用：Vue拖拽插件的应用与选择

前端里的拖拖拽拽了解一下？

完结篇！React19+Arco+Zustand仿macOS风格webOS桌面系统

tauri2.0-winos基于vite6+tauri2+vue3客户端os系统

【RuoYi-SpringBoot3-ElementPlus】：若依前端增强版 —— 功能扩展优化

用 Vue 做一个轻量离线的“待办清单 + 情绪打卡”小工具

根据公司的业务需求我是如何封装组件的

js拖拽-javascript拖拽缩放示例

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐