jQueryUI：元素拖动

$(content).draggable('option');

option：

( 1 ) destroy：删除拖动方法。

( 2 ) disable：拖动方法失效。

( 3 ) enable：拖动方法生效。

( 4 ) option：参数，参数形式指定值 或 property 形式。

参数值形式：draggable ( 'option' , optionName , [value] );

property   ：draggable ({optionName:value , optionName:value});

取值	初始值	功能说明	代码形式	补充
addClasses	true	性能调节	.draggable({addClasses:false}) .draggable({'option','addClasses',false})	为 false，不调用jQueryUI提供的CSS的ui-draggable类
appendTo	parent	拖动到的位置	.draggable({appendTo:'body'}) .draggable({'option','appendTo','body'})	未指定时，追加到与拖动元素相同的容器中。
axis	false	限制拖动方向为水平（x）或垂直（y）	.draggable({axis:'x'}) .draggable({'option','axis','x'})
cancel		限制指定元素拖动	.draggable({cancel:'div'}) .draggable({'option','cancel','div'})
connectToSortable	false	使sortable方法中的拖动生效	.draggable({connectToSortable:'url'}) .draggable({'option','connectToSortable':'url'})	若要生效，将helper设置为clone
helper	original		.draggable({helper:'clone'}) .draggable({'option','helper','clone'})	clone指元素复制后在拖动中显示，original指与光标重叠的方法拖动。
containment	false	限制拖动范围	.draggable({containment:'parent'}) .draggable({'option','containment','parent'})	'parent、document、window、x1,y1,x2,y2'
cursor	auto	指定鼠标光标	.draggable({cursor:'move'}) .draggable({'option','cursor','move'})
cursorAt	false	在拖动时光标的位置	.draggable({cursorAt:{left:5}}) .draggable({'option','cursorAt','{left:5}'})	{top:n,left:n,right:n,bottom:n}
delay	0	拖动延迟，单位毫秒	.draggable({delay:500}) .draggable({'option','delay',500})
distance	1	拖动需要的最短距离，单位px	.draggable({distance:20}) .draggable({'option','distance',20})	元素被拖动超过了指定距离，才会移动
grid	false	以指定网格（x，y）坐标的方式移动	.draggable({grid:[50,20]}) .draggable({'option','grid',[50,20]})
handle	false	在指定元素中可以拖动排序元素	.draggable({handle:'p'}) .draggable({'option','handle','p'})
iframeFix	false	防止mouseover事件的动作	.draggable({iframeFix:true}) .draggable({'option','iframeFix',true})	在iframe上，拖动其他元素时，要防止mouseover事件动作
opacity	false	元素拖动时的不透明度	.draggable({opacity:0.5}) .draggable({'option','opacity',0.5})
refreshPositions	false	计算鼠标拖动时的拖动坐标	.draggable({refreshPositions:true}) .draggable({'option','refreshPositions',true})	耗费资源的精细动作，会使性能变差
revert	false	返回拖动元素的原位置	.draggable({revert:true}) .draggable({'option','revert',true})	拖动结束后，返回到原来的位置，true、false、valid、invalid
revertDuration	500	拖动结束时动画时间，单位毫秒	.draggable({revertDuration:1000}) .draggable({'option','revertDuration',1000})	拖动结束后，返回到原来的位置，以微妙为单位指定动画结束时间
scope	default	将拖动元素细致分组	.draggable({scope:'tasks'}) .draggable({'option','scope','tasks'})	对于drop功能的accept被设定的元素，在需要进一步分组时使用
scroll	true	设置自动滚动条	.draggable({scroll:true}) .draggable({'option','scroll',true})	是否有滚动条
scrollSensitivity	20	一像素为单位指定鼠标箭头与显示领域间的距离	.draggable({scrollSensitivity:40}) .draggable({'option','scrollSensitivity',40})
scrollSpeed	20	滚动的速率	.draggable({scrollSpeed:40}) .draggable({'option','scrollSpeed',40})	在scrollSensitivity中指定的值中指定页面滚动时加入鼠标箭头距离后的速率
snap	false	向指定元素附近移动时是否吸附	.draggable({snap:true}) .draggable({'option','snap',true})
snapMode	both	吸附位置	.draggable({snapMode:'outer'}) .draggable({'option','snapMode','outer'})	inner、outer、both
snapTolerance	20	最小的吸附动画效果距离	.draggable({snapTolerance:40}) .draggable({'option','snapTolerance',40})
stack	false	拖动分组的拖动元素时，是当前元素始终处于最前面	.draggable({stack:{group:'products',min:50}}) .draggable({'option','stack',{group:'products',min:50})	元素不会在比min中指定的层级更下方显示
zindex	false	指定拖动元素的重叠顺序	.draggable({zindex:1000}) .draggable({'option','zindex',1000})	数字越大，越显示在前面

调用事件

调用事件名时，在第一个参数中获取event的内容，在第二个参数中获取ui的元素。ui元素的取值如下：

(1) ui.helper：表示拖动中元素helper的jQuery对象。

(2) ui.position：可从Offset元素中参照拖动元素的helper的相对位置，包括top与left属性。

(3) ui.offset：可从页中参照拖动元素的helper的相对位置，包括top与left属性。

事件选项：

选项名	值类型	事件名	功能说明	代码形式
start	function	dragstart	指定拖动开始时的事件内容	.draggable({start:function(event,ui){…}}) .bind('dragstart',function(event,ui){…})
drag	function	drag	指定拖动过程中的事件内容	.draggable({drag:function(event,ui){…}}) .bind('drag',function(event,ui){…})
stop	function	dragstop	指定拖动结束时的事件内容	.draggable({stop:function(event,ui){…}}) .bind('dragstop',function(event,ui){…})