Sortable – 简单灵活的 JavaScript 拖放排序插件

简介:   当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案。今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 原生的拖放 API 来实现拖放,并支持在触屏设备上使用。

  当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案。今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 原生的拖放 API 来实现拖放,并支持在触屏设备上使用。

您可能感兴趣的相关文章

  

 

立即下载      在线演示

 

示例代码: 

// Simple list
var list = document.getElementById("my-ui-list");
new Sortable(list); // That's all.


// Grouping
var foo = document.getElementById("foo");
new Sortable(foo, { group: "omega" });

var bar = document.getElementById("bar");
new Sortable(bar, { group: "omega" });


// Or
var container = document.getElementById("multi");
var sort = new Sortable(container, {
  handle: ".tile__title", // Restricts sort start click/touch to the specified element
  draggable: ".tile", // Specifies which items inside the element should be sortable
  onUpdate: function (evt/**Event*/){
     var item = evt.item; // the current dragged HTMLElement
  }
});

// ..
sort.destroy();

  

本文链接:Sortable – 简单灵活的 JavaScript 拖放排序插件

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
4天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
11 0
|
2月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
58 0
|
1月前
egg.js 24.13sequelize模型-字段限制排序分页
egg.js 24.13sequelize模型-字段限制排序分页
24 1
egg.js 24.13sequelize模型-字段限制排序分页
|
1月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
56 0
|
1月前
|
JavaScript 前端开发 API
JavaScript实现表格排序
JavaScript实现表格排序
12 0
|
2月前
|
JavaScript
js数组排序
js数组排序
14 0
|
3月前
|
Web App开发 移动开发 JavaScript
一篇文带你使用js实现拖拽排序
一篇文带你使用js实现拖拽排序
|
3月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
19 0
|
3月前
|
JavaScript 前端开发 容器
js---Echarts水球图的简单使用方法(ecarts官方插件)
js---Echarts水球图的简单使用方法(ecarts官方插件)
40 0
|
3月前
|
JavaScript
js数组去重排序
js数组去重排序