您的位置:首页 > Web前端 > JQuery

jquery sortable组件配置参数中文注释及demo

2017-05-08 18:40 309 查看
$(document).ready(function(){
$(".sortable").sortable({                         //排序组件初始化
appendTo:  $(".distination"),                 //不知道作用
//axis : "y",                                 //定义移动方向   x:水平   y:竖直
cursor: "move",                               //拖拽时鼠标样式
items: ".sort_item",                          //定义可拖拽的元素
cancel:  "a,button",                          //匹配的元素阻止排序事件
classes: {"ui-sortable": "highlight"},        //设置排序元素样式
connectWith:  ".distination",                 //多个排序元素间互相拖拽排序
//containment :  "#content1",                 //排序容器,拖拽不能超出容器范围
//cursorAt :  { right: 5 },                     //拖拽时,元素始终跟随鼠标的位置   { top, left, right, bottom }
//delay : 2000,                                  //排序拖拽之后延迟时间
//distance: 35,                                   //鼠标移动多少距离之后开始排序事件
dropOnEmpty: true,                              //结合connectWith属性,  是否可以拖拽到空的排序元素中
//forceHelperSize :  false,                        //强制帮助元素有一个大小   未测试
//forcePlaceholderSize: true,                      //未测试
//grid: [ 20, 100 ],                              //每次移动的坐标
//handle: ".handle",                             //元素句柄,类似于windows系统中的窗口头部
helper: "clone",                                //帮助元素的显示方式 ,  "original"   "clone"  默认original
opacity :  "0.6",                               //设置帮助元素透明度
placeholder: "sortable-placeholder",              //设置占位符样式
revert : 1000,                                     //设置动画时间   true,false,number
scroll : true,                                  //拖动到滚动条底部的时候是否向下滚动   默认true
scrollSensitivity:  60,                          //scroll为true时,鼠标距离滚动条顶部或底部多少像素是触发滚动事件
scrollSpeed : 20,                                //滚动条滚动速度,  scroll为true时生效
tolerance :"pointer",                            //指定鼠标超过元素多少时重新排序,   intersect:超过百分之五十    pointer:鼠标移入另一个个元素时   默认:intersect
zIndex:  999,                                    //设置辅助元素的堆叠顺序   未测试
activate: function(event, ui){
$("#eventBox").text("排序事件被激活");
},
beforeStop: function( event, ui ){
//$("#eventBox").text("排序事件完成前");
},
change: function( event, ui ){
//$("#eventBox").text("排序改变事件");
},
create: function( event, ui ){
//$("#eventBox").text("排序组件被创建");
},
deactivate: function( event, ui ){
//$("#eventBox").text("排序事件完成后");
},
out:function( event, ui ){
//$("#eventBox").text("排序组件被移出");
},
over:function( event, ui ){
//$("#eventBox").text("移到另一个排序组件上方");
},
remove:function(event, ui){
$("#eventBox").text("移出组件");
},
sort: function (event, ui){
$("#eventBox").text("正在排序");
}
//start  stop  update
});
$(".distination").sortable({
connectWith:  ".sortable",
receive:function(event, ui){
//$("#eventBox").text("接收组件");
}
});
$(".sort_item").click(function(){
//alert(1);
});
});
完整例子下载地址:jquery-sortable完整例子
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息