jquery sortable的拖动方法示例详解


Posted in Javascript onJanuary 16, 2014

所有的事件回调函数都有两个参数: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' )

排序后保存有两种方法,一是cookie,二是数据库配置文件等。 

下面是数据库的部分代码 原作:

$(function() { 
var show = $(".loader"); 
var orderlist = $(".orderlist"); 
var listleft = $("div[id = 'column_left']"); 
var listcenter = $("div[id = 'column_center']"); 
var listright = $("div[id = 'column_right']"); 
$( ".column" ).sortable({ 
opacity: 0.5,//拖动的透明度 
revert: true, //缓冲效果 
cursor: 'move', //拖动的时候鼠标样式 
connectWith: ".column", 
//开始用update 结果执行两次,浪费资源,古改成stop 
//但是stop在元素没有改变位置的时候也会执行, 
//用update其他js会有问题,^_^ 
stop: function(){ 
var new_order_left = []; //左栏布局 
var new_order_center = [];//中栏布局 
var new_order_right = [];//右栏布局 
listleft.children(".portlet").each(function() { 
new_order_left.push(this.title); 
}); 
listcenter.children(".portlet").each(function() { 
new_order_center.push(this.title); 
}); 
listright.children(".portlet").each(function() { 
new_order_right.push(this.title); 
}); 
var newleftid = new_order_left.join(','); 
var newcenterid = new_order_center.join(','); 
var newrightid = new_order_right.join(','); 
$.ajax({ 
type: "post", 
url: jsonUrl, //服务端处理程序 
data: { leftid: newleftid, centerid: newcenterid, rightid:newrightid}, //id:新的排列对应的ID,order:原排列顺序 
// beforeSend: function() { 
// show.html(" 正在更新"); 
// }, 
success: function(msg) { 
//alert(msg); 
show.html(""); 
} 
}); 
} 
});
Javascript 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
VUE长按事件需求详解
Oct 18 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
js实现无缝轮播图
Mar 09 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 #Javascript
js查找某元素中的所有图片地址的方法
Jan 16 #Javascript
jQuery - css() 方法示例详解
Jan 16 #Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 #Javascript
jquery对元素拖动排序示例
Jan 16 #Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 #Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 #Javascript
You might like
php+mysql实现简单的增删改查功能
2015/07/13 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
js闭包的用途详解
2014/11/09 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
python队列原理及实现方法示例
2019/11/27 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
私有程序集与共享程序集有什么区别
2013/04/05 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
《三顾茅庐》教学反思
2014/04/10 职场文书
企业公益活动策划方案
2014/08/24 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS