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中的对象创建 实例附注释
Feb 08 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
如何利用React实现图片识别App
Feb 18 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
js图片预加载示例
2014/04/30 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
vant 中van-list的用法说明
2020/11/11 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python的迭代器和生成器
2015/07/29 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python创建文件备份的脚本
2018/09/11 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
django解决跨域请求的问题
2018/11/11 Python
python判断完全平方数的方法
2018/11/13 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
土木工程专业个人求职信
2013/12/05 职场文书
职工小家建设活动方案
2014/08/25 职场文书
超市店庆活动方案
2014/08/31 职场文书
干部考核工作总结2015
2015/07/24 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技