sortable js api - 腾讯云开发者社区

文章/答案/技术大牛

发布

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更新，配合事务和参数校验

1921 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

js 数组常用API

var color3 = color.concat(color2); // concat 是将参数传递进来的数组内容拼接到调用者后面，不修改原数组

3K4 0

精读《Excel JS API》

我们来学习一下 Excel js API 开放是如何设计的，从中学习到一些开放 API 设计经验。...已经具备这么多能力，为何还需要 JS API 呢？...一句话概括就是，在 JS API 内可以使用 formula，即 JS API 是公式能力的超集，它包含了对 Excel 工作簿的增删改查、数据的限制、RangeAreas 操作、图表、透视表，甚至可以自定义...JS API 可以用在哪些地方从 Excel 流程中最开始的工作薄、工作表环节，到最细节的单元格数据校验都可通过 JS API 支持，目前看来 Excel JS API 并没有设置能力边界，而且还会不断完善...在 Excel JS API 之上，还有一个通用 API，定义为跨应用的通用 API，这样 Excel JS API 就可以把精力聚焦在 Excel 产品本身能力上。

3.6K2 0

oc和js交互_js调用api

iOS JS与OC交互本文内容导航 1、`UIWebView` JS 与 OC 交互 1.1 OC 调用 JS 函数 1.1.1 OC 拼接 JS 字符串调用 JS 方法 1.1.2 使用 JSContext...上下文环境调用 JS 函数 1.2 JS 调用 OC 函数 1.2.1 OC 拦截 JS 超链接操作请求 1.2.2 向 JS 中注入 OC 类 1.2.3 使用 JSContext 上下文，JS函数...拦截 JS 超链接请求 2.3.2 OC 接收 JS 发来的消息 3、第三方库实现 OC 与 JS 交互 3.1 `WebViewJavascriptBridge` 库使用 1、UIWebView JS...②使用 JSContext 上下文调用 JS 函数第一种方法使用相对简单，但复杂业务可能无法实现。 1.1.1 OC 拼接 JS 字符串调用 JS 方法 JS 代码如下： JS 方法，使用block回调JS返回结果。

70.6K2 0

【JS】1705- 重学 JavaScript API - Fullscreen API

4.3 工具推荐以下是几个基于 Fullscreen API 实现的 GitHub 仓库： fullPage.js[2]：34.6k⭐，一个基于 Fullscreen API 的全屏滚动库，支持多种效果和自定义配置...screenfull.js[3]：6.8k⭐，一个小巧的 Fullscreen API 库，支持多种浏览器和设备。...BigVideo.js[4]：2.3k⭐，一个基于 Fullscreen API 的视频背景库，支持多种视频格式和配置选项。 ✨ 5....search=Fullscreen [2] fullPage.js: https://github.com/alvarotrigo/fullPage.js [3] screenfull.js: https...://github.com/sindresorhus/screenfull.js [4] BigVideo.js: https://github.com/dfcb/BigVideo.js [5] Fullscreen

1.1K4 0

【JS】1714- 重学 JavaScript API - Geolocation API

Page Visibility API 2. Broadcast Channel API 3. Beacon API 4. Resize Observer API 5....Clipboard API 6. Fetch API 7. Performance API 8. WebStorage API 9. WebSockets API 10....Turf.js[6]：8k⭐，一个用于地理空间分析的 JavaScript 库，提供了许多有用的地理空间函数和算法。.../github.com/openlayers/openlayers [5] Mapbox: https://github.com/mapbox/mapbox-gl-js [6] Turf.js: https...# 11 个需要避免的 React 错误用法 # 6 个 Vue3 开发必备的 VSCode 插件 # 3 款非常实用的 Node.js 版本管理工具 # 6 个你必须明白 Vue3 的 ref 和 reactive

1.6K6 0

【JS】1699- 重学 JavaScript API - WebSockets API

Page Visibility API 2. Broadcast Channel API 3. Beacon API 4. Resize Observer API 5....Clipboard API 6. Fetch API 7. Performance API 8....WebSockets API 的实际应用 WebSockets API 在许多实际应用中发挥着重要作用。...ws[3] 19.8K⭐ 一个简单易用的 WebSocket 客户端和服务器库，适用于 Node.js。它提供了基本的 WebSocket 功能，并支持自定义扩展。...# 11 个需要避免的 React 错误用法 # 6 个 Vue3 开发必备的 VSCode 插件 # 3 款非常实用的 Node.js 版本管理工具 # 6 个你必须明白 Vue3 的 ref 和 reactive

9274 0

【JS】1680- 重学 JavaScript API - Beacon API

❝前期回顾： 1.Page Visibility API 2.Broadcast Channel API ❞ 1....什么是 Beacon API 1.1 概念介绍 Beacon API 是 HTML5 提供的一种新的浏览器 API，可以用于在浏览器后台异步地发送数据，而不影响当前页面的加载和性能。...Beacon API 的使用建议和注意事项 5.1 Beacon API 的使用建议在使用 Beacon API 时，需要注意以下几点：数据的大小应该尽量小，以便快速进行发送。...5.2 Beacon API 的注意事项在使用 Beacon API 时，需要注意以下几点： Beacon API 可能存在兼容性问题，需要进行兼容性处理。...# 11 个需要避免的 React 错误用法 # 6 个 Vue3 开发必备的 VSCode 插件 # 3 款非常实用的 Node.js 版本管理工具 # 6 个你必须明白 Vue3 的 ref 和 reactive

7705 0

【JS】1691- 重学 JavaScript API - Performance API

// 监测关键资源的加载时间 const keyResources = [ "https://example.com/css/style.css", "https://example.com/js...Perfume.js[3]：2.8K⭐ 一个小巧而强大的性能度量库，可用于监测页面加载时间、关键资源加载时间和用户交互延迟。...PerformanceNow.js[4]：100⭐ 一个小巧的性能计时库，基于 Performance API 的高分辨率时间戳，提供更准确的性能测量功能。...search=Performance%20API [2] Web Vitals: https://github.com/GoogleChrome/web-vitals [3] Perfume.js: https...://github.com/Zizzamia/perfume.js [4] PerformanceNow.js: https://github.com/myrne/performance-now [5]

1.1K5 0

【JS】1686- 重学 JavaScript API - Clipboard API

什么是 Clipboard API 1.1 概念介绍 Clipboard API[1] 是一组 JavaScript API，用于在浏览器中操作剪贴板。...如何使用 Clipboard API Clipboard API 包括两个主要的接口：Clipboard 和 DataTransfer。...Clipboard API 的兼容性和优缺点 4.1 Clipboard API 的兼容性以下是 Clipboard API 的兼容性情况： Chrome: 43+ ✅ Edge: 12+ ✅ Firefox...我们也可以使用一些第三方库，快速实现需求： clipboard.js[3]: 33.1K⭐，一个简单的 JavaScript 库，用于操作剪贴板。...search=Clipboard [3] 「clipboard.js」: https://github.com/zenorocha/clipboard.js/ [4] 「clipboard-polyfill

1.7K5 0

【JS】1688- 重学 JavaScript API - Fetch API

Page Visibility API 2. Broadcast Channel API 3. Beacon API 4. Resize Observer API 5....Clipboard API ❞ 1. 什么是 Fetch API 1.1 概念介绍 Fetch API[1] 是一种现代的 JavaScript API，用于进行「网络请求」。...isomorphic-fetch[8]: 7k⭐，提供 Fetch API 兼容性支持的库，适用于浏览器和 Node.js 等环境。 5..../ [13] Fetch API vs Axios: Which Should You Choose: https://blog.bitsrc.io/fetch-api-vs-axios-js-for-making-http-requests...# 11 个需要避免的 React 错误用法 # 6 个 Vue3 开发必备的 VSCode 插件 # 3 款非常实用的 Node.js 版本管理工具 # 6 个你必须明白 Vue3 的 ref 和 reactive

1.4K3 0

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...ptype-'+me.selectedSubType; $(selector).droppable("destroy"); }, 参考链接 https://www.html.cn/jquery-ui-api.../sortable/ https://www.html.cn/jquery-ui-api/draggable/ https://www.html.cn/jquery-ui-api/droppable

3.3K1 0

js免费调用天气API

js调用天气API 文档参考链接: 天气API文档 1、首先登陆天气API进行用户注册点击右上角进行注册、登录 2、打开API文档如下图其中appid和appsecret则在天气API控制器中查看...其中appid和version和appsecret3者为必填选项，例如https://www.tianqiapi.com/api?...这三种参数可填可不填，不填则默认当前所在地址 3、写法我用的是uni-app的写法，其实都差不多啦 uni.request({ url: "https://www.tianqiapi.com/api

3.9K1 0

Google JS API 授权失败

// 初始化OAuth2.0授权 const authenticate = () => { return gapi.aut...

4.8K3 0

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

本插件基于bootstrap，网上各种例子也比较多，本文就不详细列api一类的了，只将自己常用的记录一下。多数代码中存在的注释，就不再重写。.../bootstrap-table.js"> js/bootstrap-table-zh-CN.min.js...-- 单元格内容编辑，选用 --> js/bootstrap-editable.js">...onEditableSave:function (field, row, oldValue, $el) { //修改成功后，调用后台api传递修改内容，从而达到永久性修改

3.4K1 0

点击加载更多

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

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

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

jquery 列表可拖动排序 sortable

React 拖拽排序组件 Draggable Sortable

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

js 数组常用API

精读《Excel JS API》

oc和js交互_js调用api

【JS】1705- 重学 JavaScript API - Fullscreen API

【JS】1714- 重学 JavaScript API - Geolocation API

【JS】1699- 重学 JavaScript API - WebSockets API

【JS】1680- 重学 JavaScript API - Beacon API

【JS】1691- 重学 JavaScript API - Performance API

【JS】1686- 重学 JavaScript API - Clipboard API

【JS】1688- 重学 JavaScript API - Fetch API

jQuery ui中sortable draggable droppable的使用

js免费调用天气API

Google JS API 授权失败

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐