所属类别
交互
用法
描述:使用鼠标调整列表中或者网格中元素的排序。
版本新增:1.0
依赖:
- UI核心
- 部件库(Widget Factory)
- 鼠标交互
注释:jQuery UI 可排序(Sortable)插件让被选元素通过鼠标拖拽进行排序。
注释:为了排序表格行, 必须是可排序的(sortable),而不是 。tbody
table
快速导航
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
appendTo | jQuery 或 Element 或 Selector 或 String | 当拖拽时,通过鼠标移动的助手被追加到哪里(例如,解决 overlap/zIndex 问题)。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).sortable({ appendTo: document.body }); 在初始化后,获取或设置 // getter var appendTo = $( ".selector" ).sortable( "option", "appendTo" ); // setter $( ".selector" ).sortable( "option", "appendTo", document.body ); |
"parent" |
axis | String | 如果定义了该选项,项目只能在水平或垂直方向上被拖拽。可能的值:"x" , "y" 。 代码实例: 初始化带有指定 $( ".selector" ).sortable({ axis: "x" }); 在初始化后,获取或设置 // getter var axis = $( ".selector" ).sortable( "option", "axis" ); // setter $( ".selector" ).sortable( "option", "axis", "x" ); |
false |
cancel | Selector | 防止从匹配选择器的元素上开始排序。 代码实例: 初始化带有指定 $( ".selector" ).sortable({ cancel: "a,button" }); 在初始化后,获取或设置 // getter var cancel = $( ".selector" ).sortable( "option", "cancel" ); // setter $( ".selector" ).sortable( "option", "cancel", "a,button" ); |
"input, textarea, button, select, option" |
connectWith | Selector | 列表中的项目需被连接的其他 sortable 元素的选择器。这是一个单向关系,如果您想要项目被双向连接,必须在两个 sortable 元素上都设置 connectWith 选项。 代码实例: 初始化带有指定 $( ".selector" ).sortable({ connectWith: "#shopping-cart" }); 在初始化后,获取或设置 // getter var connectWith = $( ".selector" ).sortable( "option", "connectWith" ); // setter $( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" ); |
false |
containment | Element 或 Selector 或 String | 定义拖拽时,sortable 项目被约束的边界。 注释:为 containment 指定的元素必须有一个已计算的宽度和高度(尽管它不需要显式)。例如,如果您有 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).sortable({ containment: "parent" }); 在初始化后,获取或设置 // getter var containment = $( ".selector" ).sortable( "option", "containment" ); // setter $( ".selector" ).sortable( "option", "containment", "parent" ); |
false |
cursor | String | 定义当排序时被显示的光标。 代码实例: 初始化带有指定 $( ".selector" ).sortable({ cursor: "move" }); 在初始化后,获取或设置 // getter var cursor = $( ".selector" ).sortable( "option", "cursor" ); // setter $( ".selector" ).sortable( "option", "cursor", "move" ); |
"auto" |
cursorAt | Object | 移动排序元素或助手(helper),这样光标总是出现,以便从相同的位置进行拖拽。坐标可通过一个或两个键的组合成一个哈希给出:{ top, left, right, bottom } 。 代码实例: 初始化带有指定 $( ".selector" ).sortable({ cursorAt: { left: 5 } }); 在初始化后,获取或设置 // getter var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" ); // setter $( ".selector" ).sortable( "option", "cursorAt", { left: 5 } ); |
false |
delay | Integer | 鼠标按下后直到排序开始的时间,以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。 代码实例: 初始化带有指定 $( ".selector" ).sortable({ delay: 150 }); 在初始化后,获取或设置 // getter var delay = $( ".selector" ).sortable( "option", "delay" ); // setter $( ".selector" ).sortable( "option", "delay", 150 ); |
0 |
disabled | Boolean | 如果设置为 true ,则禁用该 sortable。 代码实例: 初始化带有指定 $( ".selector" ).sortable({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).sortable( "option", "disabled" ); // setter $( ".selector" ).sortable( "option", "disabled", true ); |
false |
distance | Number | 鼠标按下后排序开始前必须移动的距离,以像素计。如果指定了该选项,排序只有在鼠标拖拽超出指定距离时才会开始。该选项可以用于允许在一个手柄内的元素上点击。 代码实例: 初始化带有指定 $( ".selector" ).sortable({ distance: 5 }); 在初始化后,获取或设置 // getter var distance = $( ".selector" ).sortable( "option", "distance" ); // setter $( ".selector" ).sortable( "option", "distance", 5 ); |
1 |
dropOnEmpty | Boolean | 如果为 false ,从该 sortable 的项目不能被放置在空连接的 sort |