UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery拖拽排序插件jQuery Sortable

所属分类：UI-筛选及排序

 65519  345  查看评论 (11)
分享到微信朋友圈
X
jQuery拖拽排序插件jQuery Sortable ie兼容6
 查看演示  立即下载

灵活且有主见的排序 jQuery 插件

功能

        任何在任何容器中的项进行排序

        完全支持嵌套的容器

        连接列表

        回调和事件 （见文档）

        纯拖放列表

        垂直和水平排序

兼容性

        jquery-sortable.js已测试以下浏览器

        Firefox >= 3.5

        Chrome

        IE > 7

        Safari >= 6

        Opera

入门

制作可排序的列表中包括的 3 个简单步骤

添加样式

body.dragging, body.dragging * {
  cursor: move !important;
}
.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}
ol.example li.placeholder {
  position: relative;
  /** More li styles **/
}
ol.example li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}

定义你的 HTML

<ol class='example'>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
<script src='js/jquery-sortable.js'></script>


调用初始值设定项

$(function  () {
  $("ol.example").sortable()
})


相关插件-筛选及排序
查看更多

table 点击排序 三种方法

 不用通过数据交互那么复杂，可以简单的静态排序和筛选，适用于后台数据列表等需求
  筛选及排序
 41952  365

前端表格排序插件，支持ajax分页

 jQuery前端表格排序插件，支持ajax分页，后端分页只排序当前页，或前端分页排序
  筛选及排序
 37661  366

仿当当移动端筛选

 仿当当网移动端条件筛选
  筛选及排序
 40139  370

angular过滤搜索

 angular主要用于对数据的过滤搜索,代码注释很全，适合新手学习
  筛选及排序
 29743  330

讨论这个项目（11）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    嘿 大头 0
    2019/8/5 14:39:27
    这个没有文档昂。。有找到文档的吗？ 回复
    波克比 0
    2019/3/4 14:08:36
    动态生成的列表元素排序不了？？？ 回复
    怪我咯~_~ 0
    2018/10/19 8:56:53
    请问回调在哪里 回复
    自由飞翔ct 0
    2018/7/10 9:36:54
    部分手机在微信浏览器不能拖动。。。 回复
    angel?? 郁 0
    2018/3/2 9:06:10
    文档在哪
        Durance┾0
        2018/7/24 10:05:28
        同问文档在哪
        āáǎà0
        2018/10/15 9:22:10
        文档在哪？
    回复
    时光科技 0
    2018/2/25 11:43:16
    　　　　　　　　　　　　 0
    2017/12/6 14:31:10
    移动端不能动啊？ 回复
    双鱼座的spring 1
    2017/3/30 17:25:06

    为什么下载的时候提示：404插件不存在？？？？？

        西瓜0
        2017/3/30 18:18:57

        感谢反馈，已经修改好了。

    回复
    魔界小鸟 0
    2013/12/25 14:17:00

    jquery改版很不错，赞一个！

    回复
    不可不戒 0
    2013/12/25 9:53:00

    内容专业，设计专业，赞一个

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复