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

$(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完整例子

你可能感兴趣的:(web前端)