Drag.Sort

允许拖动和排序列表。

#Example

对按钮进行排序

<ol id="sortExample">
    <li><a class="btn btn-sm btn-default">First</a></li>
    <li><a class="btn btn-sm btn-primary">Second</a></li>
    <li><a class="btn btn-sm btn-success">Third</a></li>
</ol>

<script>
    $('#sortExample').sortable()
</script>

<style>
    body.dragging, body.dragging * {
        cursor: move !important
    }
    .dragged {
        position: absolute; opacity: 0.5; z-index: 2000;
    }
    #sortExample li.placeholder {
        position: relative;
    }
</style>

#JavaScript API

这sortable() 必须在有效容器上调用方法，这意味着它们必须与 containerSelector 选项匹配。

.sortable('enable') 启用匹配元素集中的所有实例化可排序对象

.sortable('disable') 禁用匹配元素集中的所有实例化可排序对象

.sortable('refresh') 重置所有缓存的元素维度

.sortable('destroy') 从匹配元素集中移除可排序插件

.sortable('serialize') 序列化所有选定的容器。返回一个 jQuery 对象。如果需要，使用 .get() 检索数组。

#支持的选项

• useAnimation：当一个项目被移除或插入到树中时使用动画。

• usePlaceholderClone：占位符应该是被拖动项目的克隆。

• afterMove：这是在移动占位符后执行的。 $closestItemOrContainer 包含最近的项目，占位符已放在或最近的空容器中，占位符已附加到。

• containerPath：容器与其项目之间的确切 css 路径，例如“>身体”

• containerSelector: 容器的CSS选择器

• distance：鼠标必须移动才能开始拖动的距离

• delay: mousedown 后到拖动应该开始的时间（以毫秒为单位）。此选项可用于防止在单击元素时出现不必要的拖动。

• handle: 拖动手柄的css选择器

• itemPath：项目及其子容器之间的确切 css 路径。它应该只匹配容器的直接项目。不应匹配子容器的任何项目。例如。对于 ol>div>li，itemPath 是“> div”

• itemSelector: 项目的CSS选择器

• bodyClass：拖动项目时赋予“body”的类

• draggedClass: 被拖动时给项目的类

• isValidTarget：检查拖动的项目是否在容器内。小心使用，因为搜索有效容器需要深度优先搜索并且可能非常昂贵。

• onCancel：如果占位符已分离，则在 onDrop 之前执行。如果 pullPlaceholder 设置为 false 并且放置发​​生在容器外，就会发生这种情况。

• onDrag：在鼠标移动事件开始时执行。占位符尚未移动。

• onDragStart：在拖动开始后调用，即按住鼠标按钮并移动鼠标。容器是最近的初始化容器。因此，它可能不是真正包含该项目的容器。

• onDrop：释放鼠标按钮时调用

• onMousedown: 在 mousedown 上调用。如果返回 false 值，则不会开始拖动。如果点击的元素是 input、select 或 textarea 则忽略

• placeholderClass: 占位符的类（必须匹配占位符选项标记）

• placeholder: 占位符模板。可以是任何有效的 jQuery 输入，例如一个字符串，一个 DOM 元素。占位符必须具有类“占位符”

• pullPlaceholder：如果为真，则占位符的位置在每次鼠标移动时计算。如果为 false，则仅在鼠标位于容器上方时计算。

• serialize：指定容器组的序列化。 $parent/$children 对是容器/项目或项目/子容器。

• tolerance：拖动时设置公差。正值降低敏感度，负值增加敏感度。

#支持的选项（特定于容器）

• drag：如果为真，则可以从该容器中拖动项目

• drop：如果为真，物品可以放到这个容器上

• exclude：如果选择器与项目匹配，则将项目排除在可拖动范围之外

• nested：如果为 true，则搜索项目内的嵌套容器。如果嵌套容器，则调用插件的原始选择器必须仅匹配顶部容器，或者需要指定一个组（请参阅引导导航示例）

• vertical：如果为true，则假定项目是垂直排列的