sortable.js控制拖拽区域经验

最新推荐文章于 2024-05-29 12:03:21 发布
最新推荐文章于 2024-05-29 12:03:21 发布
阅读量5.7k 收藏 5
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37028216/article/details/106522447
版权

sortable.js配置项:  http://www.sortablejs.com/options.html

 

方法一: 

通过配置属性完成

handle: 设置可拖拽元素的className

filter: 设置不可拖拽元素的className

dragable: 设置设置可被拖拽区域的className

 

方法二：

 在onStart实践中通过方法toArray先记录拖拽前的顺序, onEnd若拖拽不合法可以使用sort方法重新变回拖拽前的顺序

Hws有梦想
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
sortable items不让他拖，也不让他放。cancel不然他拖动
weixin_33919941的博客
12-12 3077
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
jquery.fn.sortable.js:jQuery插件可排序
05-16
总的来说，`jquery.fn.sortable.js`为JavaScript开发者提供了一种方便的方式来实现动态排序，它简化了代码并提高了用户体验。通过深入理解和恰当使用这个插件，你可以为你的Web应用增加更多交互性和动态性。
vue树形表格拖拽排序限制父级拖进子级，限制跨级拖拽，只能同级拖拽排序（原创）
牛儿还在山坡上吃草的博客
08-16 3815
Vue显示表格部分 <template> <div> <!--列表--> <vxe-grid border row-key ref="xTable2" class="sortable-tree-demo" :scroll-y="{ enabled: false }" :columns="tableColumn" :data="tableTreeData" :tree-config="{ children: 'children' }"...
sortablejs 拖拽排序部分情况动态禁用拖拽
qq_37768929的博客
11-14 6872
sortablejs 拖拽排序部分情况动态禁用拖拽
el-table sortablejs 禁止拖动到第一行
最新发布
Yue
05-29 237
为el-table中tr添加其他样式:row-class-name="rowClassName"
使用sortablejs实现表格拖拽排序（控制可拖拽区域）
qq_41485537的博客
03-31 4869
拖拽列表自定义排序 需求比较简单，不涉及复杂操作，对符合要求数据进行拖拽更换数据顺序 引入sortablejs npm i sortablejs； import Sortable from "sortablejs"; //在所需文件引入即可 代码演示 <el-table ref="tableRef" class="sort-box" :row-class-name="handleDragAllow" :default-sort="{prop: 'ex
vue3中使用sortablejs + el-table中实现拖动行（切换路由回来后导致不能拖动的问题解决）
qq_29184685的博客
08-17 1637
const table = document.querySelector(‘.reqtable .el-table__body-wrapper tbody’) // 使用这种方法路由切换后再切换回来获取不到dom元素，取到的值为null。一、安装：yarn install --save sortablejs。
Sortable.js拖放排序JavaScript库
热门推荐
樊小书生
09-08 2万+
本文仅做翻译记录查看，GitHub原项目地址： https://github.com/RubaXa/Sortable/ ，建议将Sortable.js下载到本地，GitHub上的例子在复制到本地运行，在 http://jsbin.com 上运行很多时候会报Sortable is not defined 的错误。 Sortable.js是用于在现代浏览器和触摸设备上重新拖放排序列表的JavaSc...
Sortable.js：功能强大的JavaScript 拖拽库
流绪@微梦
01-08 5308
Sortable.js：功能强大的JavaScript 拖拽库
jQuery实现拖拽排序插件Sortable.js.zip
11-19
Sortable.js 是一个基于 jQuery 的轻量级拖拽排序插件，它使得在网页上通过鼠标拖放元素进行排序变得简单易行。这个插件适用于那些需要动态调整列表顺序的场景，比如任务管理器、购物车或者任何需要用户自定义顺序的...
Sortable.zip
07-09
5. **选项**：Sortable.js 提供许多配置项来定制排序行为，如`group`（定义可拖放到其他Sortable实例的组）、`handle`（指定拖动的手柄元素）、`delay`（设置延迟开始排序的时间）等。 6. **嵌套排序**：Sortable....
Jquery Sortable实现div拖动排序效果
10-27
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...
js div浮动层拖拽效果代码.zip
07-04
JavaScript（JS）是一种广泛用于网页和网络应用的脚本语言，尤其在实现用户交互和动态效果方面具有重要作用。在这个“js div浮动层拖拽效果代码.zip”中，包含的是一段实现HTML `<div>` 元素可拖动功能的JS代码。这...
关于使用Sortable来实现表格的拖拽遇到的问题
走在路上的张先森
07-27 3527
引入 npm install sortablejs --save 按需引入 import Sortable from ‘sortablejs’; 方法一： 1.首先是拖拽完成之后需要重新调用列表的接口 2.el-table里面绑定一个key，在刷新数据的时候取反 方法二： 异步再次执行一次表格数据的赋值，推荐使用这种，看似呆板，但是易懂！！！ 注意： 这里排序会调用一个接口，我们不要忽略了接口调用失败的数据处理，不然数据的顺序会改变与后台的数据不一致 代码 <template>
通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
weixin_34217711的博客
12-31 1858
前言 关于讲解 JS 的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。这是我在编写插件时遇到的问题，其实很多插件的拖拽功能并没有处理这些细节，经过翻阅 jquery ui 的源码才找到答案。 拖拽实现 关于拖拽功能不再啰嗦，直接贴代码 /** * [draggable 拖拽方法] * @param ...
el-input,禁止粘贴, 禁止拖拽输入
J_mine的博客
08-13 2610
原理分析 流览器的 事件传递机制是 (先捕获,后冒泡)的过程 , 粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件, 并阻止向下传播即可 代码如下 <el-input v-model="input" placeholder="请输入内容" @paste.native.capture.prevent="inputPress"> </el-input> methods...
前端使用Sortable拖拽排序插件,里面的input.textarea光标无法移动的解决
dongyan3595的博客
11-26 1266
var sort = Sortable.create(container, { animation: 500, // ms, animation speed moving items when sorting, `0` — without animation handle: ".upload-goods-sort", // Restricts sort start click/touch to the specified element draggable: ".upload-g.
Sortable.js学习笔记
胡图图的博客
08-14 535
Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。...
vue利用sortablejs实现表格的拖拽排序
mwsblue的博客
07-07 1483
vue利用sortablejs实现表格的拖拽排序
Sortable.js的拖拽提示
07-14
Sortable.js是一个用于实现拖拽排序的JavaScript库。它可以帮助你创建可拖拽的列表、表格或其他元素，并提供一些有用的提示功能。 要添加拖拽提示，你可以使用Sortable.js提供的一些事件和选项。以下是一个示例，展示了如何使用Sortable.js来创建一个拖拽排序的列表，并添加拖拽提示： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script> </head> <body> <ul id="sortable-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <script> var sortableList = Sortable.create(document.getElementById("sortable-list"), { animation: 150, // 动画持续时间（以毫秒为单位） ghostClass: "sortable-ghost", // 拖拽元素的样式类 chosenClass: "sortable-chosen", // 选中元素的样式类 dragClass: "sortable-drag", // 拖拽过程中元素的样式类 // 拖拽开始时的回调函数 onStart: function (evt) { evt.item.classList.add("sortable-dragging"); }, // 拖拽结束时的回调函数 onEnd: function (evt) { evt.item.classList.remove("sortable-dragging"); } }); </script> </body> </html> ``` 在上述示例中，我们创建了一个带有id为"sortable-list"的无序列表，并使用Sortable.create()方法将其转换为可拖拽排序的列表。我们还设置了一些选项，例如动画持续时间、拖拽元素的样式类等。 在拖拽开始时，我们使用onStart回调函数给被拖拽的元素添加了一个名为"sortable-dragging"的样式类，以突出显示正在拖拽的元素。在拖拽结束时，我们使用onEnd回调函数将该样式类移除。 你可以根据自己的需求来定义这些样式类，以实现你想要的拖拽提示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值