所有的事件回调函数都有两个参数: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   
以毫秒为单位,设置延迟多久才激活排序动作。此参数可防止误点击。   
初始:$('.selector').sortable({ delay: 500 });   
获取:var delay = $('.selector').sortable('option', 'delay');   
设置:$('.selector').sortable('option', 'delay', 500);

distance : Integer : 1   
决定至少要在元素上面拖动多少像素后,才正式触发排序动作。   
初始:$('.selector').sortable({ distance: 30 });   
获取:var distance = $('.selector').sortable('option', 'distance');   
设置:$('.selector').sortable('option', 'distance', 30);

dropOnEmpty : Boolean : true    
是否允許拖拽到一個空的sortable对象中。   
初始:$('.selector').sortable({ dropOnEmpty: false });   
获取:var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty');   
设置:$('.selector').sortable('option', 'dropOnEmpty', false);

forceHelperSize : Boolean : false    
If true, forces the helper to have a size.   
初始:$('.selector').sortable({ forceHelperSize: true });   
获取:var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize');   
设置:$('.selector').sortable('option', 'forceHelperSize', true);

forcePlaceholderSize : Boolean : false 
If true, forces the placeholder to have a size.   
初始:$('.selector').sortable({ forcePlaceholderSize: true });   
获取:var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize');   
设置:$('.selector').sortable('option', 'forcePlaceholderSize', true);

grid : Array : false    
将排序对象的item元素视为一个格子处理,每次移动都按一个格子大小移动,数组值:[x,y]   
初始:$('.selector').sortable({ grid: [50, 20] });   
获取:var grid = $('.selector').sortable('option', 'grid');   
设置:$('.selector').sortable('option', 'grid', [50, 20]);

handle : Selector, Element : false    
限制排序的动作只能在item元素中的某个元素开始。   
初始:$('.selector').sortable({ handle: 'h2' });   
获取:var handle = $('.selector').sortable('option', 'handle');   
设置:$('.selector').sortable('option', 'handle', 'h2');

helper : String, Function : 'original'    
设置是否在拖拽元素时,显示一个辅助的元素。可选值:'original', 'clone' 
初始:$('.selector').sortable({ helper: 'clone' });   
获取:var helper = $('.selector').sortable('option', 'helper');   
设置:$('.selector').sortable('option', 'helper', 'clone');

items : Selector : '> *'    
指定在排序对象中,哪些元素是可以进行拖拽排序的。   
初始:$('.selector').sortable({ items: 'li' });   
获取:var items = $('.selector').sortable('option', 'items');   
设置:$('.selector').sortable('option', 'items', 'li');

opacity : Float : false    
定义当排序时,辅助元素(helper)显示的透明度。   
初始:$('.selector').sortable({ opacity: 0.6 });   
获取:var opacity = $('.selector').sortable('option', 'opacity');   
设置:$('.selector').sortable('option', 'opacity', 0.6);

placeholderType: StringDefault: false    
设置当排序动作发生时,空白占位符的CSS样式。   
初始:$('.selector').sortable({ placeholder: 'ui-state-highlight' });   
获取:var placeholder = $('.selector').sortable('option', 'placeholder');   
设置:$('.selector').sortable('option', 'placeholder', 'ui-state-highlight');

revert : Boolean : false 
如果设置成true,则被拖拽的元素在返回新位置时,会有一个动画效果。   
初始:$('.selector').sortable({ revert: true });   
获取:var revert = $('.selector').sortable('option', 'revert');   
设置:$('.selector').sortable('option', 'revert', true);

scroll : Boolean : true 
如果设置成true,则元素被拖动到页面边缘时,会自动滚动。   
初始:$('.selector').sortable({ scroll: false });   
获取:var scroll = $('.selector').sortable('option', 'scroll');   
设置:$('.selector').sortable('option', 'scroll', false);

scrollSensitivity : Integer : 20    
设置当元素移动至边缘多少像素时,便开始滚动页面。   
初始:$('.selector').sortable({ scrollSensitivity: 40 });   
获取:var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');   
设置:$('.selector').sortable('option', 'scrollSensitivity', 40);

scrollSpeed : Integer : 20   
设置页面滚动的速度。   
初始:$('.selector').sortable({ scrollSpeed: 40 });   
获取:var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed');   
设置:$('.selector').sortable('option', 'scrollSpeed', 40);

tolerance : String : 'intersect' 
设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值:'intersect', 'pointer' 
intersect:至少重叠50%   
pointer:鼠标指针重叠元素   
初始:$('.selector').sortable({ tolerance: 'pointer' });   
获取:var tolerance = $('.selector').sortable('option', 'tolerance');   
设置:$('.selector').sortable('option', 'tolerance', 'pointer');

zIndex : Integer : 1000   
设置在排序动作发生时,元素的z-index值。   
初始:$('.selector').sortable({ zIndex: 5 });   
获取:var zIndex = $('.selector').sortable('option', 'zIndex');   
设置:$('.selector').sortable('option', 'zIndex', 5);

·事件

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) { ... });

·方法   
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' )

属性:

  • group:string or array

  • sort:boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序;

  • delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间;

  • disabled:boolean 定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能,为false时为可以进行排序,相当于一个开关;

  • animation:number 单位:ms,定义排序动画的时间;

  • handle:selector 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动;

  • filter:selector 格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔;

  • draggable:selector 格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放

  • ghostClass:selector 格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式;

  • chosenClass:selector 格式为简单css选择器的字符串,当选中列表单元时会给该单元增加一个class;

  • forceFallback:boolean 如果设置为true时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等;

  • fallbackClass:string 当forceFallback设置为true时,拖放过程中鼠标附着单元的样式;

  • scroll:boolean 默认为true,当排序的容器是个可滚动的区域,拖放可以引起区域滚动
    事件:

  • onChoose:function 列表单元被选中的回调函数

  • onStart:function 列表单元拖动开始的回调函数,当鼠标点上去的时候触发。

  • onEnd:function 列表单元拖放结束后的回调函数

  • onAdd:function 列表单元添加到本列表容器的回调函数

  • onUpdate:function 列表单元在列表容器中的排序发生变化后的回调函数

  • onRemove:function 列表元素移到另一个列表容器的回调函数

  • onFilter:function 试图选中一个被filter过滤的列表单元的回调函数

  • onMove:function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数

  • onClone:function 当创建一个列表单元副本的时候的回调函数
    事件对象:

事件对象在各个函数中略有不同,可通过输出对象查看对象的属性,下面简单列举几个:

  • to:HTMLElement--移动到列表容器

  • from:HTMLElement--来源的列表容器

  • item:HTMLElement--被移动的列表单元

  • clone:HTMLElement--副本的列表单元

  • oldIndex:number/undefined--在列表容器中的原序号

  • newIndex:number/undefined--在列表容器中的新序号


方法

      • option(name[,value])
        获得或者设置项参数,使用方法类似于jQuery用法,没有第二个参数为获得option中第一个参数所对应的值,有第二个参数时,将重新赋给第一个参数所对应的值;

      • closest
        没理解

      • toArray()
        序列化可排序的列表单元的data-id(可通过配置项中dataIdAttr修改)放入一个数组,并返回这个数组中

      • sort()
        通过自定义列表单元的data-id的数组对列表单元进行排序

      • save()

      • destroy()

sortable的基本属性的更多相关文章

  1. jQuery插件:jqGrid引入及基本属性

    1. jqGrid下载 jqGrid下载地址: http://www.trirand.com/blog/ jqGrid Demo: http://www.guriddo.net/demo/guridd ...

  2. jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

    ※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public strin ...

  3. 基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2(利用Sortable进行拖动排序)

    在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...

  4. Material Design 概念,环境和基本属性

    Material Design 概念,环境和基本属性 Material Design是随Android 5.0推出的一种设计概念, 涉及到了跨平台和设备的视觉,动态,交互设计等方面.   设计概念 M ...

  5. Windows Locale Codes - Sortable list(具体一个语言里还可具体细分,中国是2052,法国是1036)

    Windows Locale Codes - Sortable list NOTE: Code page is an outdated method for character encoding, y ...

  6. CSS2中基本属性的介绍

    这是继上一篇的选择器的总结,对css2基本属性的小结!

  7. 内省、JavaBean、PropertyDescriptor类、Introspector类、BeanUtils工具包、注解、Rentention、Target、注解的基本属性和高级属性

      本文转载自:http://blog.sina.com.cn/s/blog_5d65a16901011kom.html 关键字:内省.JavaBean.PropertyDescriptor类.Int ...

  8. angular ng-repeat+sortable 拖拽demo

    由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...

  9. Sortable – 简单灵活的 JavaScript 拖放排序插件

    当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案.今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 ...

随机推荐

  1. LOJ #6509. 「雅礼集训 2018 Day7」C

    神仙题 LOJ #6509 题意 给定一棵树,点权为0/1,每次随机一个点(可能和之前所在点相同)走到该点并将其点权异或上1 求期望的移动距离使得所有点点权相同 题解 根本不会解方程 容易发现如果一个 ...

  2. vue.js学习系列-第一篇(代码)

    <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ...

  3. Python自动化中的元素定位xpath(二)

    1.Xpath元素定位 1)ele = b.find_element_by_xpath(‘/html/body/from/input[1]’) 2)Ele = b.find_element_by_xp ...

  4. 拷贝本地文件到docker容器

    查找所有容器 docker ps -a 查找容器长ID docker inspect -f '{{.ID}}' python 拷贝本地文件到容器 docker cp 本地路径 容器长ID:容器路径

  5. python笔记01-05

    作者:Vamei 出处:http://www.cnblogs.com/vamei https://blog.csdn.net/flyfrommath/article/details/77447587 ...

  6. xPath Helper插件

    xPath Helper插件 xPath helper是一款Chrome浏览器的开发者插件,安装了xPath helper后就能轻松获取HTML元素的xPath,程序员就再也不需要通过搜索html源代 ...

  7. CodeForces 671C - Ultimate Weirdness of an Array

    题意: 给以一个定义, F(l, r) 的值表示序列 A[1:n]的子序列 A[1....(l-1),(r+1)...n] 之中 任意两个数的最大公约数的最大值. 求 Sum=∑i=1N∑j=1N(F ...

  8. Maven将代码及依赖打成一个Jar包的方式

    Maven可以使用mvn package指令对项目进行打包,如果使用java -jar xxx.jar执行运行jar文件,会出现"no main manifest attribute, in ...

  9. onscroll 元素滚动事件

    阻止事件冒泡 event.stopPropagation(); children():查找合集里面的第一级子元素.(仅儿子辈,这里可以理解为就是父亲-儿子的关) children只查找第一级的子节点 ...

  10. C语言作业2

    一.实验目的与要求 1.if语句的应用 ●掌握C语言的逻辑运算和关系运算的规则 ●学会正确的使用关系表达式和逻辑表达式 ●掌握if-else语句的使用方法 2.switch/case语句的应用 ●   ...