最新消息:ocsen.wang域名正式启用了!

jquery ui 拖动排序 sortable

Aliexpress ocsen 1099浏览

jquery ui 的另一个强大的功能就是拖动排序,也就是通过鼠标的拖到,实现对一些元素的排序。
废话少说,用实例说话。

官网地址:http://jqueryui.com/sortable/

附上实例链接,不过需要我们网站的用户名密码哦,简单的注册一下吧,

http://www.weituibao.com/editor/multi

 

顺便打个广告,我们的微信编辑器,很好用的哦,公众号的朋友们,赶紧试试吧!

一、简单的实例

下面是对一组li元素进行排序的实例

1、代码

2、截图

(1)拖拽排序之前

jquery-ui-sortable 拖拽之前截图 -- ifxoxo.com

(2)拖拽排序的过程

jquery-ui-sortable 拖拽过程截图 -- ifxoxo.com

(3)拖拽排序之后

jquery-ui-sortable 拖拽排序之后 -- ifxoxo.com

二、具体实现

1、需要加载文件

(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css

2、页面上的HTML代码

需要一个< div >或者< ul >等元素, 它的直接子节点将可以被拖拽排序

3、js代码

最简单的初始化函数:

(它支持很多参数,详见4)

4、sortable的参数

(为了更好的解释一些参数,有一个复杂的示例,详见6)

 参数  默认值  作用
 axis  false  如果有设置,则元素仅能横向或纵向拖动。可选值:’x’, ‘y’
 cancel  input,textarea,
button,select,option
 阻止排序动作在匹配的元素上发生
connectWith false 允许sortable对象连接另一个sortable对象,可将item元素拖拽到另一个中.(类型:Selector)
containment false 约束排序动作只能在一个指定的范围内发生。可选值:DOM对象, ‘parent’, ‘document’, ‘window’, 或jQuery对象
cursor auto 定义在开始排序动作时,鼠标的样式。
如 cursor: “move”
cursorAt false 当开始移动时,元素的偏移的位置(最多两个方向)。可选值:{ top, left, right, bottom }。
如 cursorAt: {left:5,bottom:5}
delay 0 以毫秒为单位,设置延迟多久才激活排序动作。此参数可防止误点击。
如 delay: 500
distance 1 决定至少要在元素上面拖动多少像素后,才正式触发排序动作。
如 distance: 30
dropOnEmpty false 是否允許拖拽到一個空的sortable对象中。
grid false 每次移动都按一个格子大小移动,数组值:[x,y]
如 grid: [50, 20]
handle false 限制排序的动作只能在item元素中的某种元素
如 handle: ‘h2′
helper original 设置是否在拖拽元素时,显示一个辅助的元素。可选值:‘original’, ‘clone’。
如 helper: ‘clone’
items “> *” (第一级子元素) 指定在排序对象中,哪些元素是可以进行拖拽排序的。
如 items: “> li”
opacity false 辅助元素(helper)显示的透明度
如 opacity: 0.6
placeholder false 设置当排序动作发生时,空白占位符的CSS样式
如 placeholder: ‘css-class-name’ (指定一个css的class)
revert false 如果设置成true,则被拖拽的元素在返回新位置时,会有一个动画效果
scroll false 如果设置成true,则元素被拖动到页面边缘时,会自动滚动。
scrollSensitivity 20 设置当元素移动至边缘多少像素时,便开始滚动页面
scrollSpeed 20 设置页面滚动的速度
tolerance intersect 设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值:’intersect’, ‘pointer’
intersect:至少重叠50%
pointer:鼠标指针重叠元素
zIndex 1000 设置在排序动作发生时,元素的z-index值

5、事件和方法

(为了更好的解释一些事件和方法,有一个复杂的示例,详见6)

(1)事件

start
当排序动作开始时触发此事件。
定义:$(‘.selector’).sortable({ start: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortstart’, function(event, ui) { … });

sort
当元素发生排序时触发此事件。
定义:$(‘.selector’).sortable({ sort: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sort’, function(event, ui) { … });

change
当元素发生排序且坐标已发生改变时触发此事件。
定义:$(‘.selector’).sortable({ change: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortchange’, function(event, ui) { … });

beforeStop
当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。
定义:$(‘.selector’).sortable({ beforeStop: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortbeforeStop’, function(event, ui) { … });

stop
当排序动作结束时触发此事件。
定义:$(‘.selector’).sortable({ stop: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortstop’, function(event, ui) { … });

update
当排序动作结束时且元素坐标已经发生改变时触发此事件。
定义:$(‘.selector’).sortable({ update: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortupdate’, function(event, ui) { … });

receive
当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。
定义:$(‘.selector’).sortable({ receive: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortreceive’, function(event, ui) { … });

over
当一个元素拖拽移入另一个sortable对象后触发此事件。
定义:$(‘.selector’).sortable({ over: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortover’, function(event, ui) { … });

out
当一个元素拖拽移出sortable对象移出并进入另一个sortable对象后触发此事件。
定义:$(‘.selector’).sortable({ out: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortout’, function(event, ui) { … });

activate
当一个有使用连接的sortable对象开始排序动作时,所有允许的sortable触发此事件。
定义:$(‘.selector’).sortable({ activate: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortactivate’, function(event, ui) { … });
deactivate
当一个有使用连接的sortable对象结束排序动作时,所有允许的sortable触发此事件。
定义:$(‘.selector’).sortable({ deactivate: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortdeactivate’, function(event, ui) { … });

(2)方法

destory
从元素中移除拖拽功能。
用法:.sortable( ‘destroy’ )

disable
禁用元素的拖拽功能。
用法:.sortable( ‘disable’ )

enable
启用元素的拖拽功能。
用法:.sortable( ‘enable’ )

option
获取或设置元素的参数。
用法:.sortable( ‘option’ , optionName , [value] )

serialize
获取或设置序列化后的每个item元素的id属性。
用法:.sortable( ‘serialize’ , [options] )

toArray
获取序列化后的每个item元素的id属性的数组。
用法:.sortable( ‘toArray’ )

refresh
手动重新刷新当前sortable对象的item元素的排序。
用法:.sortable( ‘refresh’ )

refreshPositions
手动重新刷新当前sortable对象的item元素的坐标,此方法可能会降低性能。
用法:.sortable( ‘refreshPositions’ )

cancel
取消当前sortable对象中item元素的排序改变。
用法:.sortable( ‘cancel’ )

6、一个稍微复杂一点的例子:

截图如下:

展示排序结果--ifxoxo.com

 

转载请注明:Ocsen-因上努力,果上随缘 » jquery ui 拖动排序 sortable

111