Sortable.js拖拽排序实现详解
169 浏览量
更新于2024-07-15
收藏 254KB PDF 举报
"Sortable.js是一个强大的JavaScript库,用于实现拖拽排序功能。本文将详细解析Sortable.js的使用方法,包括其核心事件以及基本的DOM操作。虽然Sortable.js的源码大约有1300行,但设计得相当精炼,适用于各种拖拽排序场景。需要注意的是,由于依赖HTML5的拖拽功能,该插件不支持IE9以下的浏览器。"
在了解Sortable.js之前,首先要明确拖拽排序的基本流程。Sortable.js通过监听和响应一系列事件来实现拖放行为。这些事件包括:
1. **ondragstart**:当用户开始拖动元素时触发,该事件发生在被拖动的元素上。在这个事件中,通常会设置一些拖动过程中的样式,如添加透明度或改变背景色,以便用户能明显感知到拖动状态。
2. **ondragenter**:当拖动元素进入目标元素区域时触发,对目标元素进行处理,比如允许元素接受拖放(通过阻止默认的`dragenter`事件行为)。
3. **ondragover**:在拖动元素在目标元素上方移动时持续触发,此事件同样作用于目标元素。处理此事件可确保元素可以在正确的位置被放下。
4. **ondrop**:当用户在目标元素上释放鼠标按钮时触发,这时通常会执行实际的排序操作,例如交换元素的位置。这个事件也需要阻止默认的`drop`事件,以免浏览器执行默认的文件上传等行为。
5. **ondragend**:拖动结束后触发,主要用于清理拖动过程中设置的样式或状态,恢复元素到正常状态。
Sortable.js利用这些事件以及JavaScript的DOM操作,实现了动态调整元素顺序的功能。例如,通过交换元素的`appendChild`或`insertBefore`方法来改变它们在DOM树中的位置。同时,它还处理了一些复杂情况,如滚动条滚动、边界检测和自定义反馈效果。
为了开始使用Sortable.js,你需要引入`Sortable.js`库和可选的`app.css`样式文件。创建一个可拖拽排序的列表非常简单,只需要选择一个DOM元素并初始化Sortable实例,如下所示:
```javascript
var sortable = new Sortable(document.getElementById('yourElement'), {
// 这里可以配置选项,如动画效果、数据交换模式等
});
```
如果你不使用`app.css`,可以自己添加样式以实现拖动时的视觉反馈,例如创建一个名为`.sortable-ghost`的CSS类,给拖动元素添加半透明和背景色,以增强用户体验。
在实际项目中,Sortable.js提供了丰富的选项和回调函数,允许你定制拖放行为,比如设置拖动时的动画效果、处理拖放后的数据同步等。其强大的功能和简洁的API使得Sortable.js成为实现拖拽排序的首选工具,尤其适合现代浏览器环境。
2018-07-04 上传
2018-06-28 上传
# Sortable
Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists.
Demo: http://rubaxa.github.io/Sortable/
## Features
* Supports touch devices and [modern](http://caniuse.com/#search=drag) browsers (including IE9)
* Can drag from one list to another or within the same list
* CSS animation when moving items
* Supports drag handles *and selectable text* (better than voidberg's html5sortable)
* Smart auto-scrolling
* Built using native HTML5 drag and drop API
* Supports
* [Meteor](https://github.com/SortableJS/meteor-sortablejs)
* AngularJS
* [2.0+](https://github.com/SortableJS/angular-sortablejs)
* [1.*](https://github.com/SortableJS/angular-legacy-sortablejs)
* React
* [ES2015+](https://github.com/SortableJS/react-sortablejs)
* [Mixin](https://github.com/SortableJS/react-mixin-sortablejs)
* [Knockout](https://github.com/SortableJS/knockout-sortablejs)
* [Polymer](https://github.com/SortableJS/polymer-sortablejs)
* [Vue](https://github.com/SortableJS/Vue.Draggable)
* Supports any CSS library, e.g. [Bootstrap](#bs)
* Simple API
* [CDN](#cdn)
* No jQuery (but there is [support](#jq))
### Articles * [Sortable v1.0 — New capabilities](https://github.com/RubaXa/Sortable/wiki/Sortable-v1.0-—-New-capabilities/) (December 22, 2014) * [Sorting with the help of HTML5 Drag'n'Drop API](https://github.com/RubaXa/Sortable/wiki/Sorting-with-the-help-of-HTML5-Drag'n'Drop-API/) (December 23, 2013)
### Install Via npm ```bash $ npm install sortablejs --save ``` Via bower: ```bash $ bower install --save sortablejs ```
### Usage ```html
(or `jquery.fn.sortable.min.js` if you run `grunt jquery:min`) ```js $("#list").sortable({ /* options */ }); // init $("#list").sortable("widget"); // get Sortable instance $("#list").sortable("destroy"); // destroy Sortable instance $("#list").sortable("{method-name}"); // call an instance method $("#list").sortable("{method-name}", "foo", "bar"); // call an instance method with parameters ``` And `grunt jquery:mySortableFunc` → `jquery.fn.mySortableFunc.js` --- ### Contributing (Issue/PR) Please, [read this](CONTRIBUTING.md). --- ## MIT LICENSE Copyright 2013-2017 Lebedev Konstantin <ibnRubaXa@gmail.com> http://rubaxa.github.io/Sortable/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
### Articles * [Sortable v1.0 — New capabilities](https://github.com/RubaXa/Sortable/wiki/Sortable-v1.0-—-New-capabilities/) (December 22, 2014) * [Sorting with the help of HTML5 Drag'n'Drop API](https://github.com/RubaXa/Sortable/wiki/Sorting-with-the-help-of-HTML5-Drag'n'Drop-API/) (December 23, 2013)
### Install Via npm ```bash $ npm install sortablejs --save ``` Via bower: ```bash $ bower install --save sortablejs ```
### Usage ```html
- item 1
- item 2
- item 3
- :: list item text one
- :: list item text two
- order
- save
- restore
- This is Sortable
- It works with Bootstrap...
- ...out of the box.
- It has support for touch devices.
- Just drag some elements around.
(or `jquery.fn.sortable.min.js` if you run `grunt jquery:min`) ```js $("#list").sortable({ /* options */ }); // init $("#list").sortable("widget"); // get Sortable instance $("#list").sortable("destroy"); // destroy Sortable instance $("#list").sortable("{method-name}"); // call an instance method $("#list").sortable("{method-name}", "foo", "bar"); // call an instance method with parameters ``` And `grunt jquery:mySortableFunc` → `jquery.fn.mySortableFunc.js` --- ### Contributing (Issue/PR) Please, [read this](CONTRIBUTING.md). --- ## MIT LICENSE Copyright 2013-2017 Lebedev Konstantin <ibnRubaXa@gmail.com> http://rubaxa.github.io/Sortable/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2023-03-27 上传
2023-10-21 上传
2024-09-21 上传
2023-08-05 上传
2023-09-04 上传
2023-07-11 上传
weixin_38666232
- 粉丝: 3
- 资源: 923
最新资源
- JDK 17 Linux版本压缩包解压与安装指南
- C++/Qt飞行模拟器教员控制台系统源码发布
- TensorFlow深度学习实践:CNN在MNIST数据集上的应用
- 鸿蒙驱动HCIA资料整理-培训教材与开发者指南
- 凯撒Java版SaaS OA协同办公软件v2.0特性解析
- AutoCAD二次开发中文指南下载 - C#编程深入解析
- C语言冒泡排序算法实现详解
- Pointofix截屏:轻松实现高效截图体验
- Matlab实现SVM数据分类与预测教程
- 基于JSP+SQL的网站流量统计管理系统设计与实现
- C语言实现删除字符中重复项的方法与技巧
- e-sqlcipher.dll动态链接库的作用与应用
- 浙江工业大学自考网站开发与继续教育官网模板设计
- STM32 103C8T6 OLED 显示程序实现指南
- 高效压缩技术:删除重复字符压缩包
- JSP+SQL智能交通管理系统:违章处理与交通效率提升