jQuery拖拽排序插件jQuery Sortable

本文由清尘发表于2018-01-11 16:33最后修改于2018-05-31属于jQuery分类

查看演示

官方文档: http://johnny.github.com/jquery-sortable/

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

完全支持嵌套的容器

连接列表

回调和事件 (见文档)

纯拖放列表

垂直和水平排序

兼容性
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 **/
}
<ol class='example'>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

初始化:

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