js sortable() - 腾讯云开发者社区

文章/答案/技术大牛

发布

sortable.js——Vue 数据更新问题

从一个 bug 说起在一个需求中，我需要实现一个拖拽的功能，其中我使用了 sortable.js 去实现，但我发现我拖拽之后的数据并没有渲染在页面上。...那就可能是 sortable.js 的问题了 // 代码参考：https://segmentfault.com/q/1010000009672767 mounted : function () {...var that = this; var sortable1 = new Sortable(document.querySelector('#topicNumBox'), {

4.3K3 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...prop="address" label="地址"> import Sortable...".demo-table-wrapper .el-table__body-wrapper tbody" ); const _this = this; Sortable.create

4K1 0

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

是的

没有找到

分组拖动排序功能全流程实现（前端Sortable.js + 后端Java批量更新）

分组拖动排序功能全流程实现（前端Sortable.js + 后端Java批量更新）在后台管理系统开发中，“分组拖动排序”是高频交互需求——比如用户分组、权限分组、菜单分组等场景，产品往往要求支持通过拖拽调整分组顺序...技术选型技术栈选型理由前端 Sortable.js（轻量无依赖，仅20KB，支持拖拽动画、自定义拖拽手柄）后端 Java + Spring Boot（业务逻辑） + MyBatis（批量SQL更新...三、前端实现（Sortable.js 拖拽交互） 1. 引入依赖可通过CDN或npm引入Sortable.js，这里使用CDN简化示例： Sortable.js --> Sortable.min.js"></script...七、总结分组拖动排序功能的核心是“前端轻量交互 + 后端高效持久化”：前端用Sortable.js实现拖拽，仅需传递ID顺序，无需关心排序号计算；后端通过CASE WHEN批量SQL更新，配合事务和参数校验

1951 0

jquery 列表可拖动排序 sortable

"> jQuery UI Sortable.../scripts/jquery.js"> js/jquery.ui.core.js"> js/jquery.ui.widget.js"> js/jquery.ui.mouse.js"> js/jquery.ui.sortable.js">... ("#myList").sortable({delay:1}); //直接让myList下的元素可以拖动排序

3.2K0 0

React 拖拽排序组件 Draggable Sortable

一、引言拖拽排序（Draggable Sortable）是现代Web应用中常见的交互功能之一，尤其是在需要用户对列表项进行顺序调整的场景下。...在React中，通常使用第三方库如react-dnd（React Drag and Drop）或react-sortable-hoc来实现这一功能。...例如，对于react-sortable-hoc： npm install react-sortable-hoc 创建可排序组件使用库提供的高阶组件（HOC）包裹原始组件，使其具备拖拽排序的能力。...例如，使用sortable-helper类来定义拖拽项的样式。占位符显示不当占位符用于指示拖拽项的目标位置，如果显示不当会影响用户体验。....sortable-item { background-color: #f0f0f0; padding: 8px; margin-bottom: 4px; } .sortable-helper

1.5K0 0

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

实现效果 Sortable.js介绍 Sortable.js 是一款强大且轻量级的JavaScript库，专为实现元素的拖放排序功能而设计。...易于集成：只需引入Sortable.js文件，然后通过简单的JavaScript代码即可启用拖放排序功能，适用于列表、表格等常见布局元素。...模块化设计：Sortable.js采用模块化结构，开发者可以根据实际需求选择导入核心库或是包含所有插件的完整版本，有助于控制最终打包文件的大小。...通过Sortable.js，开发者可以快速实现如列表项的拖动重排、不同容器间的元素转移等常见交互需求，大大提升了Web应用的交互性和用户体验。...通过使用Sortable.js，我们能够为用户提供一种直观的方式来排序数据，使得应用更加符合用户需求。

4.6K1 1

jQuery ui中sortable draggable droppable的使用

sortable 简单的配置如下： $('#subs-box').sortable({ axis: 'y', cursor: 'ns-resize', placeholder:...stop: function (e, ui) { // 排序后元素的顺序（前提每个元素都需要有id属性） let newSubArr = $("#subs-box").sortable...me.selectedSubType; $(selector).droppable("destroy"); }, 参考链接 https://www.html.cn/jquery-ui-api/sortable

3.3K1 0

BootstrapTable固定头和底部

查看效果版本选择采用的bootstrapTable样式与js的版本是1.15.4，采用比较低的版本会在有滚动条的情况下，表格不对齐需要引用的CSS与js js"> js/bootstrap.js"> js"> js"> <script src="../..

3.2K2 0

Bootstrap Table 插件实现固定左侧列

="true">状态描述状态描述 sortable="true">客户号 sortable="true...">客户名称 sortable="true">监测设备编号 sortable="true">提醒余额...sortable="true">结算时间 sortable="true">实时结算金额 sortable.../bootstrap/js/bootstrap.js"> js/sidebarHeight.js"> <script src="../..

5.2K2 0

前端开发---使用bootstrap-table展示物联网数据

Max" data-sortable="true" >113-Max sortable="true" >114-Avg...-Cou" data-sortable="true" >B02-Cou sortable="true">B02-Max...="S08-Avg" data-sortable="true" >S08-Avg sortable="true.../bootstrap-3.3.7-dist/js/bootstrap.js"> js...src="/lib/daterangepicker/daterangepicker.js"> js/hj212.js">

1.7K3 0

uni-app引入sortable列表拖拽，兼容App和H5

sortable文档项目结构 sortable下载到本地 renderjs只支持H5和App-vue，不支持小程序和App-nvue开发 <view class...} }, methods: { changeSort(e) { console.log(e) } } } sortable...this.setSortable() } else { const script = document.createElement('script') script.src = 'static/js.../sortable.min.js' script.onload = this.setSortable.bind(this) document.head.appendChild(script...$ownerInstance.callMethod('changeSort', sortable.toArray()); } } let sortable = Sortable.create

3K4 0

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

/sortable.complete.esm.js'; 插件导入 // Cherrypick extra plugins import Sortable, { MultiDrag, Swap } from..., { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js'; Sortable.mount(new AutoScroll());...filter 选项 Sortable.create(list, { filter: ".js-remove, .js-edit", onFilter: function (evt) { var...-- Latest Sortable --> Sortable/master/Sortable.js".../master/Sortable.js"> // js var things = document.getElementById('things'); var things2

8.6K1 0

自用插件整理之表格bootstrap-table

/bootstrap-table.js"> js/bootstrap-table-zh-CN.min.js...-- 单元格内容编辑，选用 --> js/bootstrap-editable.js">...js/bootstrap-table-editable.min.js"> 使用 html...{ field: 'sortNum', title: '排序', align: 'center', sortable

3.4K1 0

Salesforce Add Sorting in Lightning Data Table in Lightning Web Component

image.png 点击列名进行进行排序功能 image.png 1.JS中为每一列设置【sortable:true】 const columns = [ { label: 'Name', fieldName...: 'name', type: 'text', sortable: true }, { label: 'Email', fieldName: 'email', type: 'text', sortable...: true }, { label: 'Phone', fieldName: 'phone', type: 'text', sortable: true }, { label: 'OwnerName...', fieldName: 'ownerName', type: 'text', sortable: true }, { label: 'Birthdate', fieldName: 'birthdate...sortDirection} sorted-by={sortedBy} onsort={onHandleSort}> 3.Js

8042 0

jquery 列表可拖动排序，并把排序发送给后台

"> jQuery UI Sortable.../scripts/jquery.js"> js/jquery.ui.core.js"> js/jquery.ui.mouse.js"> js/jquery.ui.sortable.js">... ("#myList").sortable({ delay:1, //修复潜在链接点击问题 stop:function...() { ('#myList').sortable('serialize'), function(response) { alert(response); } ); } }); });

1.9K0 0

OL3中结合Jquery UI实现图层拖动并改变图层顺序

/images/bgImg.gif"); background-repeat: inherit; } #sortable { position: absolute; right...move; margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable...like Internet Explorer and Android 4.x --> js...Element.prototype.classList,URL"> js.../plugin/jquery/jquery-1.8.3.js"> js

1.9K2 0

在EasyUI的DataGrid中嵌入Combobox

/Content/JqueryEasyUI/themes/icon.css")" rel="stylesheet" /> @*添加Jquery，EasyUI和easyUI的语言包的JS文件*@.../Content/JqueryEasyUI/jquery-1.8.0.min.js")"> js")"> js")"> @*实现对EasyUI的DataGird控件操作的JS代码*@...}, { title: '具体内容', field: 'NewsContent', sortable

5K3 0

解决bootstrap-table-fixed-columns.js固定的列不能排序问题

$header.find('tr').clone(true); 这样点击排序的功能是实现了，但是小图标没有变化，因为源码我也看不太明白，直接在外面写的js控制图标的变化。...2、另外写的js代码 $(".fixed-table-header-columns").on("click", "th div.sortable", function() { ...var sibling = $(this).parent().siblings().find("div.sortable") if (!...).addClass("asc") } }) $(".fixed-table-header").on("click", "th div.sortable...", function() { $(".fixed-table-header-columns th div.sortable").removeClass("asc desc")

4.6K3 0

Ext基础

', dataIndex:'birthday',sortable:true}, {header:'地址', dataIndex:'address', sortable:true}, {header:...,排序 {header:'姓名', dataIndex:'empName',sortable:true}, {header:'性别', dataIndex:'sex',sortable:true},...:true}, {header:'姓名', dataIndex:'empName',sortable:true}, {header:'性别', dataIndex:'sex',sortable:true..., sortable:true} ]); 6...., sortable:true} ]); 7.

2.2K1 0

ExtJs学习笔记(3)_GridPanel

/adapter/ext/ext-base.js"> js"> ExtJs_Grid_Xml sortable: true }, { header: "制作商", width...: 'ProductGroup', sortable: false }], renderTo: 'example-grid', viewConfig:...: 115, dataIndex: 'Publisher', sortable: false }], renderTo: 'example-grid

1.1K8 0

点击加载更多

sortable.js——Vue 数据更新问题

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

分组拖动排序功能全流程实现（前端Sortable.js + 后端Java批量更新）

jquery 列表可拖动排序 sortable

React 拖拽排序组件 Draggable Sortable

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

jQuery ui中sortable draggable droppable的使用

BootstrapTable固定头和底部

Bootstrap Table 插件实现固定左侧列

前端开发---使用bootstrap-table展示物联网数据

uni-app引入sortable列表拖拽，兼容App和H5

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

自用插件整理之表格bootstrap-table

Salesforce Add Sorting in Lightning Data Table in Lightning Web Component

jquery 列表可拖动排序，并把排序发送给后台

OL3中结合Jquery UI实现图层拖动并改变图层顺序

在EasyUI的DataGrid中嵌入Combobox

解决bootstrap-table-fixed-columns.js固定的列不能排序问题

Ext基础

ExtJs学习笔记(3)_GridPanel

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐