jQuery UI API - 可排序小部件（Sortable Widget）

所属类别

交互

用法

描述：使用鼠标调整列表中或者网格中元素的排序。

版本新增：1.0

依赖：

• UI核心
• 部件库（Widget Factory）
• 鼠标交互

注释：jQuery UI 可排序（Sortable）插件让被选元素通过鼠标拖拽进行排序。

注释：为了排序表格行， 必须是可排序的（sortable），而不是 。tbodytable

快速导航

选项	类型	描述	默认值
appendTo	jQuery 或 Element 或 Selector 或 String	当拖拽时，通过鼠标移动的助手被追加到哪里（例如，解决 overlap/zIndex 问题）。 支持多个类型： jQuery：一个 jQuery 对象，包含助手（helper）要追加到的元素。 Element：要追加助手（helper）的元素。 Selector：一个选择器，指定哪个元素要追加助手（helper）。 String：字符串 "parent" 将促使助手（helper）成为 sortable 项目的同级。 代码实例： 初始化带有指定 appendTo 选项的 sortable： $( ".selector" ).sortable({ appendTo: document.body });      在初始化后，获取或设置 appendTo 选项： // getter var appendTo = $( ".selector" ).sortable( "option", "appendTo" ); // setter $( ".selector" ).sortable( "option", "appendTo", document.body );	"parent"
axis	String	如果定义了该选项，项目只能在水平或垂直方向上被拖拽。可能的值："x", "y"。 代码实例： 初始化带有指定 axis 选项的 sortable： $( ".selector" ).sortable({ axis: "x" });      在初始化后，获取或设置 axis 选项： // getter var axis = $( ".selector" ).sortable( "option", "axis" ); // setter $( ".selector" ).sortable( "option", "axis", "x" );	false
cancel	Selector	防止从匹配选择器的元素上开始排序。 代码实例： 初始化带有指定 cancel 选项的 sortable： $( ".selector" ).sortable({ cancel: "a,button" });      在初始化后，获取或设置 cancel 选项： // getter var cancel = $( ".selector" ).sortable( "option", "cancel" ); // setter $( ".selector" ).sortable( "option", "cancel", "a,button" );	"input, textarea, button, select, option"
connectWith	Selector	列表中的项目需被连接的其他 sortable 元素的选择器。这是一个单向关系，如果您想要项目被双向连接，必须在两个 sortable 元素上都设置 connectWith 选项。 代码实例： 初始化带有指定 connectWith 选项的 sortable： $( ".selector" ).sortable({ connectWith: "#shopping-cart" });      在初始化后，获取或设置 connectWith 选项： // getter var connectWith = $( ".selector" ).sortable( "option", "connectWith" ); // setter $( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );	false
containment	Element 或 Selector 或 String	定义拖拽时，sortable 项目被约束的边界。 注释：为 containment 指定的元素必须有一个已计算的宽度和高度（尽管它不需要显式）。例如，如果您有 float: left sortable 子元素，并指定了 containment: "parent"，请确保在 sortable/parent 容器上有 float: left ，否则它将有 height: 0，导致未定义的行为。 支持多个类型： Element：一个要作为容器使用的元素。 Selector：一个选择器，指定一个要作为容器使用的元素。 String：一个字符串，标识一个要作为容器使用的元素。可能的值："parent"、"document"、"window"。 代码实例： 初始化带有指定 containment 选项的 sortable： $( ".selector" ).sortable({ containment: "parent" });      在初始化后，获取或设置 containment 选项： // getter var containment = $( ".selector" ).sortable( "option", "containment" ); // setter $( ".selector" ).sortable( "option", "containment", "parent" );	false
cursor	String	定义当排序时被显示的光标。 代码实例： 初始化带有指定 cursor 选项的 sortable： $( ".selector" ).sortable({ cursor: "move" });      在初始化后，获取或设置 cursor 选项： // getter var cursor = $( ".selector" ).sortable( "option", "cursor" ); // setter $( ".selector" ).sortable( "option", "cursor", "move" );	"auto"
cursorAt	Object	移动排序元素或助手（helper），这样光标总是出现，以便从相同的位置进行拖拽。坐标可通过一个或两个键的组合成一个哈希给出：{ top, left, right, bottom }。 代码实例： 初始化带有指定 cursorAt 选项的 sortable： $( ".selector" ).sortable({ cursorAt: { left: 5 } });      在初始化后，获取或设置 cursorAt 选项： // getter var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" ); // setter $( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );	false
delay	Integer	鼠标按下后直到排序开始的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。 代码实例： 初始化带有指定 delay 选项的 sortable： $( ".selector" ).sortable({ delay: 150 });      在初始化后，获取或设置 delay 选项： // getter var delay = $( ".selector" ).sortable( "option", "delay" ); // setter $( ".selector" ).sortable( "option", "delay", 150 );	0
disabled	Boolean	如果设置为 true，则禁用该 sortable。 代码实例： 初始化带有指定 disabled 选项的 sortable： $( ".selector" ).sortable({ disabled: true });      在初始化后，获取或设置 disabled 选项： // getter var disabled = $( ".selector" ).sortable( "option", "disabled" ); // setter $( ".selector" ).sortable( "option", "disabled", true );	false
distance	Number	鼠标按下后排序开始前必须移动的距离，以像素计。如果指定了该选项，排序只有在鼠标拖拽超出指定距离时才会开始。该选项可以用于允许在一个手柄内的元素上点击。 代码实例： 初始化带有指定 distance 选项的 sortable： $( ".selector" ).sortable({ distance: 5 });      在初始化后，获取或设置 distance 选项： // getter var distance = $( ".selector" ).sortable( "option", "distance" ); // setter $( ".selector" ).sortable( "option", "distance", 5 );	1
dropOnEmpty	Boolean	如果为 false，从该 sortable 的项目不能被放置在空连接的 sort