jquery sortable的拖动方法例子详解

发布时间：2023-09-23 14:57:24 所属栏目：教程来源：

导读：所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象

ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克隆对象

ui.position - 表示相对当前对象，鼠标的坐标

所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象

ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克隆对象

ui.position - 表示相对当前对象，鼠标的坐标值对象{top,left}

ui.offset - 表示相对于当前页面，鼠标的坐标值对象{top,left}

ui.item - 表示当前拖拽的元素

ui.placeholder - 占位符（如果有定义的话）

ui.sender - 当前拖拽元素的所属sortable对象（仅当元素是从另一个sortable对象传递过来时有用）

·参数（参数名 : 参数类型 : 默认值）

appendTo : String : 'parent'

Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).

初始：$('.selector').sortable({ appendTo: 'body' });

获取：var appendTo = $('.selector').sortable('option', 'appendTo');

设置：$('.selector').sortable('option', 'appendTo', 'body');

axis : String : false

如果有设置，则元素仅能横向或纵向拖动。可选值：'x', 'y'

初始：$('.selector').sortable({ axis: 'x' });

获取：var axis = $('.selector').sortable('option', 'axis');

设置：$('.selector').sortable('option', 'axis', 'x');

cancel : Selector : ':input,button'

阻止排序动作在匹配的元素上发生。

初始：$('.selector').sortable({ cancel: 'button' });

获取：var cancel = $('.selector').sortable('option', 'cancel');

设置：$('.selector').sortable('option', 'cancel', 'button');

connectWith : Selector : false

允许sortable对象连接另一个sortable对象，可将item元素拖拽到另一个中。

初始：$('.selector').sortable({ connectWith: '.otherlist' });

获取：var connectWith = $('.selector').sortable('option', 'connectWith');

设置：$('.selector').sortable('option', 'connectWith', '.otherlist');

containment : Element, String, Selector : false

约束排序动作只能在一个指定的范围内发生。可选值：DOM对象, 'parent', 'document', 'window', 或jQuery对象

初始：$('.selector').sortable({ containment: 'parent' });

获取：var containment = $('.selector').sortable('option', 'containment');

设置：$('.selector').sortable('option', 'containment', 'parent');

cursor : String : 'auto'

定义在开始排序动作时，如果的样式。

初始：$('.selector').sortable({ cursor: 'crosshair' });

获取：var cursor = $('.selector').sortable('option', 'cursor');

设置：$('.selector').sortable('option', 'cursor', 'crosshair');

cursorAt : Object : false

当开始移动时，鼠标定位在的某个位置上（最多两个方向）。可选值：{ top, left, right, bottom }.

初始：$('.selector').sortable({ cursorAt: 'top' });

获取：var cursorAt = $('.selector').sortable('option', 'cursorAt');

设置：$('.selector').sortable('option', 'cursorAt', 'top');

delay : Integer : 0

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!