您的位置 首页 > 德语词汇

sortable是什么意思?用法、例句(sortable 拖动排序)

今天给各位分享sortable是什么意思?用法、例句的知识,其中也会对sortable 拖动排序进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

作用:确定可移动的辅助元素在拖动时可以被添加到何处。

例子:$("tbody").sortable({appendTo:document.body});

sortable是什么意思?用法、例句(sortable 拖动排序)

它的参数值支持的对象有:jQuery对象、Element、Selector(选择器)、String("parent"),默认值为"parent"。

作用:确定元素可以在水平或垂直方向上实现拖动。

例子:$("tbody").sortable({axis:"x"});

参数值:"x","y",false,默认值为false水平或垂直都可以实现拖动。

作用:对符合选择器匹配规则的元素不进行排序。

例子:$("tbody").sortable({cancel:"tr"});于是tr就不可被拖动;

参数值:Select选择器,默认值为:"input,textarea,button,select,option"。

作用:连接两个可拖动的sortable,列表中的项目需被连接的另一个sortable元素的选择器。这是一个单向关系,如果您想要项目被双向连接,必须在两个sortable元素上都设置connectWith选项。

例子:首先可以做两个table(table1、table2),

$("#table1tbody").sortable({connectWith:"#table2tbody"}).disableSelection();

$("#table2tbody").sortable({connectWith:"#table1tbody"}).disableSelection();

于是,就可以实现两个table之间tr的拖动功能。

参数值:Select选择器,默认为false。

作用:定义一个边界,限制拖动范围在指定的DOM元素内。

注意:为限制拖动范围,指定的元素必须有一个可计算的宽度和高度(但不一定是显式的)。例如,如果你的sortable元素的子元素有float:left样式,

并且指定containment:"parent",那么sortable/parent容器必须要有float:left样式,或者他将有height:0样式,导致不确定的行为。

例子:$("tbody").sortable({containment:"tbody"});这样就可以将tr的可拖动范围限制在tbody中,不会出现滚动条的情况!

参数值:Element元素、Select选择器、String("parent"、"document"、"window")。

例子:$("tbody").sortable({cursor:"move"});这样在拖动的时候鼠标就可以变为十字光标。

作用:定义鼠标在拖动时候的位置,坐标可通过一个或两个键的组合成一个哈希给出:{top,left,right,bottom}。

例子:$("tbody").sortable({cursorAt:{left:5,top:5}});

效果:当拖动时,被拖动的行会自动移动,最终鼠标与被拖动行的相对位置为{left:5,top:5}。

参数值:{top,left,right,bottom}(object),默认值:false。

作用:在排序拖动开始多少毫秒后元素才开始移动;这可以防止意外的点击造成元素的拖动。

例子:$("tbody").sortable({delay:150});

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

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

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

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

ui.placeholder-占位符(如果有定义的话)

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

·参数(参数名:参数类型:默认值)

appendTo:String:'parent'

Defineswherethehelperthatmoveswiththemouseisbeingappendedt

如果你还想了解更多这方面的信息,记得收藏关注本站。

本站涵盖的内容、图片、视频等数据,部分未能与原作者取得联系。若涉及版权问题,请及时通知我们并提供相关证明材料,我们将及时予以删除!谢谢大家的理解与支持!

Copyright © 2023