帝王谷资源网

JS拖拽排序插件Sortable.js用法实例分析
网络编程 2024/11/2 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

本文实例讲述了JS拖拽排序插件Sortable.js用法。分享给大家供大家参考，具体如下：

最近由于项目功能设计的原因，需要对table中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js，再然后就有了这篇文章。

特点：

  • 轻量级但功能强大
  • 移动列表项时有动画
  • 支持触屏设备和大多数浏览器（IE9及以下除外）
  • 支持单个列表容器内部拖拽排序，也支持两个列表容器互相拖拽排序
  • 支持拖放操作和可选择的文本
  • 非常友善的滚动效果
  • 基于原生HTML5中的拖放API
  • 支持多种框架（Angular、Vue、React等）
  • 支持所有的CSS框架，如：Bootstrap
  • 简单的API，方便调用
  • CDN
  • 不依赖于jQuery

下载地址：https://github.com/RubaXa/Sortable
或者点击此处本站下载

运行效果如下图所示：

JS拖拽排序插件Sortable.js用法实例分析

单个列表容器内部拖拽排序

<head>
 <script src="/UploadFiles/2021-04-02/jquery-3.3.1.min.js">


两个列表容器相互拖拽排序





<head>
 <script src="/UploadFiles/2021-04-02/jquery-3.3.1.min.js">


常见配置项及事件





var sortable = new Sortable(el, {
 group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
 sort: true, // sorting inside list
 delay: 0, // time in milliseconds to define when the sorting should start
 touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
 disabled: false, // Disables the sortable if set to true.
 store: null, // @see Store
 animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
 handle: ".my-handle", // Drag handle selector within list items
 filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
 preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
 draggable: ".item", // Specifies which items inside the element should be draggable
 ghostClass: "sortable-ghost", // Class name for the drop placeholder
 chosenClass: "sortable-chosen", // Class name for the chosen item
 dragClass: "sortable-drag", // Class name for the dragging item
 dataIdAttr: 'data-id',
 forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
 fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
 fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
 fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
 scroll: true, // or HTMLElement
 scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
 scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
 scrollSpeed: 10, // px
 setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
  dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
 },
 // Element is chosen
 onChoose: function (/**Event*/evt) {
  evt.oldIndex; // element index within parent
 },
 // Element dragging started
 onStart: function (/**Event*/evt) {
  evt.oldIndex; // element index within parent
 },
 // Element dragging ended
 onEnd: function (/**Event*/evt) {
  var itemEl = evt.item; // dragged HTMLElement
  evt.to; // target list
  evt.from; // previous list
  evt.oldIndex; // element's old index within old parent
  evt.newIndex; // element's new index within new parent
 },
 // Element is dropped into the list from another list
 onAdd: function (/**Event*/evt) {
  // same properties as onEnd
 },
 // Changed sorting within list
 onUpdate: function (/**Event*/evt) {
  // same properties as onEnd
 },
 // Called by any change to the list (add / update / remove)
 onSort: function (/**Event*/evt) {
  // same properties as onEnd
 },
 // Element is removed from the list into another list
 onRemove: function (/**Event*/evt) {
  // same properties as onEnd
 },
 // Attempt to drag a filtered element
 onFilter: function (/**Event*/evt) {
  var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
 },
 // Event when you move an item in the list or between lists
 onMove: function (/**Event*/evt, /**Event*/originalEvent) {
  // Example: http://jsbin.com/tuyafe/1/edit"font-size: medium">属性


group：string or array

sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；

delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；

disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；

animation：number 单位：ms，定义排序动画的时间；

handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；

filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；

draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放

ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；

chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；

forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；

fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；

scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动


事件：


onChoose：function 列表单元被选中的回调函数

onStart：function 列表单元拖动开始的回调函数

onEnd：function 列表单元拖放结束后的回调函数

onAdd：function 列表单元添加到本列表容器的回调函数

onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数

onRemove：function 列表元素移到另一个列表容器的回调函数

onFilter：function 试图选中一个被filter过滤的列表单元的回调函数

onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数

onClone：function 当创建一个列表单元副本的时候的回调函数


事件对象：


事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，下面简单列举几个：


to：HTMLElement--移动到列表容器

from：HTMLElement--来源的列表容器

item：HTMLElement--被移动的列表单元

clone：HTMLElement--副本的列表单元

oldIndex：number/undefined--在列表容器中的原序号

newIndex：number/undefined--在列表容器中的新序号


方法


option(name[,value])

获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；


closest

返回满足selector条件的元素集合中的第一个项


toArray()

序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中


sort()

通过自定义列表单元的data-id的数组对列表单元进行排序


save()


destroy()


PS：这里再为大家推荐一款关于排序的演示工具供大家参考：


在线动画演示插入/选择/冒泡/归并/希尔/快速排序算法过程工具：

http://tools.jb51.net/aideddesign/paixu_ys


更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》


希望本文所述对大家JavaScript程序设计有所帮助。


                                

                                

                                     

                                

                                    标签：
                                        
JS,拖拽排序,插件,Sortable.js

                                     

                                
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/2

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接