标签：
·概述
在任何DOM元素启用拖动功能。通过单击鼠标并拖动对象在窗口内的任何地方移动。
官方示例地址：http://jqueryui.com/demos/draggable/
所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象
ui.helper - 表示被拖拽的元素的JQuery对象
ui.position - 表示相对当前对象，鼠标的坐标值对象{top,left}
ui.offset - 表示相对于当前页面，鼠标的坐标值对象{top,left}
·参数（参数名 : 参数类型 : 默认值）
addClasses : Boolean : true
如果设置成false，将在加载时阻止ui-draggable样式的加载。
当有很多对象要加载draggable()插件的情况下，这将对性能有极大的优化。
初始: $(‘.selector‘).draggable({ addClasses: false });
获取: var addClasses = $(‘.selector‘).draggable(‘option‘, ‘addClasses‘);
设置: $(‘.selector‘).draggable(‘option‘, ‘addClasses‘, false);
appendTo : Element,Selector : ‘parent‘
The element passed to or selected by the appendTo option will be used
as the draggable helper‘s container during dragging. By default, the
helper is appended to the same container as the draggable.
初始：$(‘.selector‘).draggable({ appendTo: ‘body‘ });
获取：var appendTo = $(‘.selector‘).draggable(‘option‘, ‘appendTo‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘appendTo‘, ‘body‘);
axis : String : false
约束拖动的动作只能在X轴或Y轴上执行，可选值：‘x‘, ‘y‘。
初始：$(‘.selector‘).draggable({ axis: ‘x‘ });
获取：var axis = $(‘.selector‘).draggable(‘option‘, ‘axis‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘axis‘, ‘x‘);
cancel : Selector : ‘:input,option‘
防止在指定的对象上开始拖动。
初始：$(‘.selector‘).draggable({ cancel: ‘button‘ });
获取：var cancel = $(‘.selector‘).draggable(‘option‘, ‘cancel‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘cancel‘, ‘button‘);
connectToSortable : Selector : false
允许draggable被拖拽到指定的sortables中，如果使用此选项helper属性必须设置成clone才能正常工作。
初始：$(‘.selector‘).draggable({ connectToSortable: ‘ul#myList‘ });
获取：var connectToSortable = $(‘.selector‘).draggable(‘option‘, ‘connectToSortable‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘connectToSortable‘, ‘ul#myList‘);
containment : Selector,Element,String, Array : false
强制draggable只允许在指定元素或区域的范围内移动，可选值：‘parent‘, ‘document‘, ‘window‘, [x1, y1, x2, y2].
初始：$(‘.selector‘).draggable({ containment: ‘parent‘ });
获取：var containment = $(‘.selector‘).draggable(‘option‘, ‘containment‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘containment‘, ‘parent‘);
cursor : String : ‘auto‘
指定在做拖拽动作时，鼠标的CSS样式。
初始：$(‘.selector‘).draggable({ cursor: ‘crosshair‘ });
获取：var cursor = $(‘.selector‘).draggable(‘option‘, ‘cursor‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘cursor‘, ‘crosshair‘);
cursorAt : Object : false
当开始移动时，鼠标定位在的某个位置上（最多两个方向）。可选值：{ top, left, right, bottom }.
初始：$(‘.selector‘).draggable({ cursorAt: { left: 5 } });
获取：var cursorAt = $(‘.selector‘).draggable(‘option‘, ‘cursorAt‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘cursorAt‘, { left: 5 });
delay : Integer : 0
当鼠标点下后，延迟指定时间后才开始激活拖拽动作（单位：毫秒）。此选项可以用来防止不想要的拖累元素时的误点击。
初始：$(‘.selector‘).draggable({ delay: 500 });
获取：var delay = $(‘.selector‘).draggable(‘option‘, ‘delay‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘delay‘, 500);
distance : Integer : 1
当鼠标点下后，只有移动指定像素后才开始激活拖拽动作。
初始：$(‘.selector‘).draggable({ distance: 30 });
获取：var distance = $(‘.selector‘).draggable(‘option‘, ‘distance‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘distance‘, 30);
grid : Array : false
拖拽元素时，只能以指定大小的方格进行拖动。可选值：[x,y]
初始：$(‘.selector‘).draggable({ grid: [50, 20] });
获取：var grid = $(‘.selector‘).draggable(‘option‘, ‘grid‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘grid‘, [50, 20]);
handle : Element, Selector : false
限制只能在拖拽元素内的指定元素开始拖拽。
初始：$(‘.selector‘).draggable({ handle: ‘h2‘ });
获取：var handle = $(‘.selector‘).draggable(‘option‘, ‘handle‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘handle‘, ‘h2‘);
helper : String, Function : ‘original‘
拖拽元素时的显示方式。（如果是函数，必须返回值是一个DOM元素）可选值：‘original‘, ‘clone‘, Function
初始：$(‘.selector‘).draggable({ helper: ‘clone‘ });
获取：var helper = $(‘.selector‘).draggable(‘option‘, ‘helper‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘helper‘, ‘clone‘);
iframeFix : Boolean, Selector : false
可防止当mouseover事件触发拖拽动作时，移动过iframes并捕获到它（内部内容），如果设置成true，则屏蔽层会覆盖页面的iframe。如果设置成对应的选择器，则屏蔽层会覆盖相匹配的iframe。
初始：$(‘.selector‘).draggable({ iframeFix: true });
获取：var iframeFix = $(‘.selector‘).draggable(‘option‘, ‘iframeFix‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘iframeFix‘, true);
opacity : Float : false
当元素开始拖拽时，改变元素的透明度。
初始：$(‘.selector‘).draggable({ opacity: 0.35 });
获取：var opacity = $(‘.selector‘).draggable(‘option‘, ‘opacity‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘opacity‘, 0.35);
refreshPositions : Boolean : false
如果设置成true，所有移动过程中的坐标都会被记录。（注意：此功能将影响性能）
初始：$(‘.selector‘).draggable({ refreshPositions: true });
获取：var refreshPositions = $(‘.selector‘).draggable(‘option‘, ‘refreshPositions‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘refreshPositions‘, true);
revert : Boolean, String : false
当元素拖拽结束后，元素回到原来的位置。
初始：$(‘.selector‘).draggable({ revert: true });
获取：var revert = $(‘.selector‘).draggable(‘option‘, ‘revert‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘revert‘, true);
revertDuration : Integer : 500
当元素拖拽结束后，元素回到原来的位置的时间。（单位：毫秒）
初始：$(‘.selector‘).draggable({ revertDuration: 1000 });
获取：var revertDuration = $(‘.selector‘).draggable(‘option‘, ‘revertDuration‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘revertDuration‘, 1000);
scope : String : ‘default‘
设置元素只允许拖拽到具有相同scope值的元素。
初始：$(‘.selector‘).draggable({ scope: ‘tasks‘ });
获取：var scope = $(‘.selector‘).draggable(‘option‘, ‘scope‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘scope‘, ‘tasks‘);
scroll : Boolean : true
如果设置为true，元素拖拽至边缘时，父容器将自动滚动。
初始：$(‘.selector‘).draggable({ scroll: false });
获取：var scroll = $(‘.selector‘).draggable(‘option‘, ‘scroll‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘scroll‘, false);
scrollSensitivity : Integer : 20
当元素拖拽至边缘时，父窗口一次滚动的像素。
初始：$(‘.selector‘).draggable({ scrollSensitivity: 40 });
获取：var scrollSensitivity = $(‘.selector‘).draggable(‘option‘, ‘scrollSensitivity‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘scrollSensitivity‘, 40);
scrollSpeed : Integer : 20
当元素拖拽至边缘时，父窗口滚动的速度。
初始：$(‘.selector‘).draggable({ scrollSpeed: 40 });
获取：var scrollSpeed = $(‘.selector‘).draggable(‘option‘, ‘scrollSpeed‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘scrollSpeed‘, 40);
snap : Boolean, Selector : false
当设置为true或元素标签时，元素拖动到其它元素的边缘时，会自动吸附其它元素。
初始：$(‘.selector‘).draggable({ snap: ‘span‘ });
获取：var snap = $(‘.selector‘).draggable(‘option‘, ‘snap‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘snap‘, ‘span‘);
snapMode : String : ‘both‘
确定拖拽的元素吸附的模式。可选值：‘inner‘, ‘outer‘, ‘both‘
初始：$(‘.selector‘).draggable({ snapMode: ‘outer‘ });
获取：var snapMode = $(‘.selector‘).draggable(‘option‘, ‘snapMode‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘snapMode‘, ‘outer‘);
snapTolerance : Integer : 20
确定拖拽的元素移动至其它元素多少像素的距离时，发生吸附的动作。
初始：$(‘.selector‘).draggable({ snapTolerance: 40 });
获取：var snapTolerance = $(‘.selector‘).draggable(‘option‘, ‘snapTolerance‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘snapTolerance‘, 40);
stack : Object : false
Controls the z-Index of the defined group (key ‘group‘ in the hash,
accepts jQuery selector) automatically, always brings to front the
dragged item. Very useful in things like window managers. Optionally, a
‘min‘ key can be set, so the zIndex cannot go below
that value.
初始：$(‘.selector‘).draggable({ stack: { group: ‘products‘, min: 50 } });
获取：var stack = $(‘.selector‘).draggable(‘option‘, ‘stack‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘stack‘, { group: ‘products‘, min: 50 });
zIndex : Integer : false
控制当拖拽元素时，改变元素的z-index值。
初始：$(‘.selector‘).draggable({ zIndex: 2700 });
获取：var zIndex = $(‘.selector‘).draggable(‘option‘, ‘zIndex‘);
设置：$(‘.selector‘).draggable(‘option‘, ‘zIndex‘, 2700);
·事件
start
当鼠标开始拖拽时，触发此事件。
初始：$(‘.selector‘).draggable({ start: function(event, ui){...} });
绑定：$(‘.selector‘).bind(‘dragstart‘, function(event, ui){...});
drag
当鼠标拖拽移动时，触发此事件。
初始：$(‘.selector‘).draggable({ drag: function(event, ui){...} });
绑定：$(‘.selector‘).bind(‘drag‘, function(event, ui){...});
stop
当鼠标松开时，触发此事件。
初始：$(‘.selector‘).draggable({ stop: function(event, ui){...} });
绑定：$(‘.selector‘).bind(‘dragstop‘, function(event, ui){...});
·方法
destory
从元素中移除拖拽功能。
用法：.draggable( ‘destroy‘ )
disable
禁用元素的拖拽功能。
用法：.draggable( ‘disable‘ )
enable
启用元素的拖拽功能。
用法：.draggable( ‘enable‘ )
option
获取或设置元素的参数。
用法：.draggable( ‘option‘ , optionName , [value] )
<script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script>
<script language="JavaScript" type="text/javascript" src="ui/jquery-ui-1.9.1.custom.js"></script>
<!--<script language="JavaScript" type="text/javascript" src="ui/jquery.ui.datepicker-zh-CN.js"></script>-->
<link rel="stylesheet" type="text/css" href="ui/jquery-ui-1.9.1.custom.css">
<!--==============================draggable===========================-->
<!--==================================================================-->
<input type="button" value="draggable_fun" onclick="draggable_fun();" />
<div id="draggable_div" class="ui-widget-content"><!--将想要可拖拽的部分用div括起来，也可以用其他网页标签括起来，被括起来的地方可添加任意内容-->
<p>Drag me around</p>
<br/>
i can fly!
</div>
<script language="JavaScript" type="text/javascript">
$("#draggable_div").draggable({
//=================属性
addClasses : true, //如果设置成false，将在加载时阻止ui-draggable样式的加载。当有很多对象要加载draggable()插件的情况下，这将对性能有极大的优化。默认值 true
appendTo : "parent", //用来指定控件在拖拽过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.默认值 "parent"
axis : false, //约束拖拽的动作只能在X轴或Y轴上执行，可选值："数值", "数值"。默认值 false
cancel : "input", //防止在指定的对象上开始拖拽可用JQuery选择器写法来指定。默认值 "input,textarea,button,select,option"
connectToSortable : false, //允许draggable被拖拽到指定的sortables中可用JQuery选择器写法来指定，如果使用此选项helper属性必须设置成clone才能正常工作。默认值 false
containment : false, //强制draggable只允许在指定元素或区域的范围内移动，可选值："parent", "document", "window", [ 数值, 数值, 数值, 数值 ].默认值 false
cursor : "auto", //指定在做拖拽动作时，鼠标的CSS样式。默认值 "auto"
cursorAt : { //当开始移动时，鼠标定位在的某个位置上（最多两个方向）。可选值：{ top, left, right, bottom }.默认值 false
left : 5
},
delay : 0, //当鼠标点下后，延迟指定时间后才开始激活拖拽动作（单位：毫秒）。此选项可以用来防止不想要的拖累元素时的误点击。默认值 0
disabled : false, //如果设成true则draggable实例不能使用。默认值 false
distance : 1, //当鼠标点下后，只有移动指定像素后才开始激活拖拽动作。默认值 1
grid : false, //拖拽元素时，只能以指定大小的方格进行拖拽。可选值： [数值,数值] 默认值 false
handle : false, //限制只能在拖拽元素内的指定元素开始拖拽，可用JQuery选择器写法来指定。默认值 false
helper : "original", //拖拽元素时的显示方式。（如果是函数，必须返回值是一个DOM元素）可选值："original", "clone", Function默认值 "original"
iframeFix : true, //可防止当mouseover事件触发拖拽动作时，移动过iframes并捕获到它（内部内容），如果设置成true，则屏蔽层会覆盖页面的iframe。如果设置成对应的选择器，则屏蔽层会覆盖相匹配的iframe。默认值 false
opacity : 0.35, //当元素开始拖拽时，改变元素的透明度。默认值 false
refreshPositions : false, //如果设置成true，所有移动过程中的坐标都会被记录。（注意：此功能将影响性能）默认值 false
revert : false, //当元素拖拽结束后，元素回到原来的位置。默认值 false
revertDuration : 500, //当元素拖拽结束后，元素回到原来的位置的时间。（单位：毫秒）默认值 500
scope : "default", //设置元素只允许拖拽到具有相同scope值的元素。默认值 "default"
scroll : true, //如果设置为true，元素拖拽至边缘时，父容器将自动滚动。默认值 true
scrollSensitivity : 20, //当元素拖拽至边缘时，父窗口一次滚动的像素。默认值 20
scrollSpeed : 20, //当元素拖拽至边缘时，父窗口滚动的速度。默认值 20
snap : "div", //当设置为true或元素标签时，元素拖拽到其它元素的边缘时，会自动吸附其它元素。默认值 false
snapMode : "both", //确定拖拽的元素吸附的模式。可选值："inner", "outer", "both"默认值 "both"
snapTolerance : 20, //确定拖拽的元素移动至其它元素多少像素的距离时，发生吸附的动作。默认值 20
stack : "div", //控制匹配元素的z-index值，使当前拖拽的对象始终在匹配元素之前，而且似乎要控制匹配的元素只能以其HTML标签名来匹配.默认值 false
zIndex : 100, //控制当拖拽元素时，改变元素的z-index值。默认值 false
//=================事件
create : function(event, ui){ //当创建draggable时触发
//alert("this is create");
},
start : function(event, ui){ //当鼠标开始拖拽时，触发此事件。
//alert("this is start");
},
drag : function(event, ui){ //当鼠标拖拽移动时，触发此事件。
//alert("this is drag");
},
stop : function(event, ui){ //当移动结束鼠标松开时，触发此事件。
//alert("this is stop");
}
});
function draggable_fun(){
//=================方法
//$( "#draggable_div" ).draggable("destroy"); //从元素中移除拖拽功能。
$( "#draggable_div" ).draggable("disable"); //禁用元素的拖拽功能。
$( "#draggable_div" ).draggable("enable"); //启用元素的拖拽功能。
$( "#draggable_div" ).draggable("option","disabled",false);//为指定属性赋值，第二参数为draggable的一个属性名，第三参数为可以为该属性赋的值
$( "#draggable_div" ).draggable("option","disabled"); //获取指定属性的值，第二参数为draggable的一个属性名
$( "#draggable_div" ).draggable("widget"); //返回该可拖拽元素的JQuery对象
}
</script>
<!--==============================droppable===========================-->
<!--==================================================================-->
<input type="button" value="droppable_fun" onclick="droppable_fun();" />
<div id="droppable_div" class="ui-widget-content"><!--将想要可拖放的部分用div括起来，也可以用其他网页标签括起来，被括起来的地方可添加任意内容-->
<p>Drop here</p>
</div>
<script language="JavaScript" type="text/javascript">
$("#droppable_div").droppable({
//=================属性
accept : "*", //仅允许符合JQuery选择器的元素激活拖放的事件。（如果是函数，则此函数会在页面上所有元素被调用，函数的返回值必须是布尔值。）默认值 "*"
activeClass : "ui-state-highlight", //如果设置值，则当有拖拽事件发生时，为页面上所有允许（accept）的元素添加此样式。默认值 false
addClasses : true, //设置为false，可以阻止ui-droppable样式添加至可拖放的对象。（这样可以获取一定的性能优化） 默认值 true
disabled : false, //如果设成true则droppable实例不能使用。默认值 false
greedy : false, //是否防止嵌套的droppable事件被传播。默认值 false
hoverClass : "drop-hover", //当拖拽元素移至带有可拖放插件的元素上时，为元素添加指定的样式。默认值 false
scope : "default", //设置元素只允许具有相同scope值拖拽元素激活此拖放元素。默认值 "default"
tolerance : "touch", /*判断一个可拖拽元素被“放到”一个可拖放元素的判断模式。（可选值："fit", "intersect", "pointer", "touch"）默认值 "intersect"
fit：拖拽元素完全覆盖拖放元素
intersect：拖拽元素至少50%覆盖拖放元素
pointer：鼠标指针重叠在可拖放元素上
touch：只要有任何重叠即发生
*/
//=================事件
create : function(event, ui) { //当创建droppable时触发
//alert("this is create");
},
activate : function(event, ui) { //当任何可拖拽元素开始拖拽动作时激活此事件。
//alert("this is activate");
},
deactivate : function(event, ui) { //当任何可拖拽元素停止拖拽动作时激活此事件。
//alert("this is deactivate");
},
over : function(event, ui) { //当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素时激活。
//alert("this is over");
},
out: function(event, ui) { //当一个被允许（accept）的可拖拽元素移出可拖放元素时激活。
//alert("this is out");
},
drop: function(event, ui) { //当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素，松开鼠标时激活。
//alert("this is drop");
}
});
function droppable_fun(){
//=================方法
//$( "#droppable_div" ).droppable("destroy"); //从元素中移除拖放功能。
$( "#droppable_div" ).droppable("disable"); //禁用元素的拖放功能。
$( "#droppable_div" ).droppable("enable"); //启用元素的拖放功能。
$( "#droppable_div" ).droppable("option","disabled",false); //为指定属性赋值，第二参数为droppable的一个属性名，第三参数为可以为该属性赋的值
$( "#droppable_div" ).droppable("option","disabled"); //获取指定属性的值，第二参数为droppable的一个属性名
$( "#droppable_div" ).droppable("widget"); //返回该可拖放元素的JQuery对象
}
</script>
<!--==============================resizable===========================-->
<!--==================================================================-->
<input type="button" value="resizable_fun" onclick="resizable_fun();" />
<div id="resizable_div" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<script language="JavaScript" type="text/javascript">
$("#resizable_div").resizable({
//=================属性
alsoResize : false, //当调整元素大小时，同步改变符合JQuery选择器的另一个（或一组）元素的大小。默认值 false
animate : true, //在调整元素大小结束之后是否显示动画默认值 false
animateDuration : "slow", //动画效果的持续时间。（单位：毫秒）可选值："slow" , "normal" , "fast" 默认值 "slow"
animateEasing : "easeOutBounce", //选择何种动画效果。默认值 "swing"
aspectRatio : false, //如果设置为true，则元素的可调整尺寸受原来高宽比的限制。例如：9 / 16, or 0.5 默认值 false
autoHide : false, //如果设置为true，则默认隐藏掉可调整大小的手柄，除非鼠标移至元素上。默认值 false
cancel : "input,textarea,button,select,option", //阻止resizable插件加载在与你匹配的元素上。默认值 "input,textarea,button,select,option"
containment : false, //控制元素只能在某一个元素的大小之内改变。允许值："parent" , "document" , DOM元素 , 或一个选择器。默认值 false
delay : 0, //以毫秒为单位，当发生鼠标点击手柄改变大小，延迟多少毫秒后才激活事件。默认值 0
disabled : false, //如果设成true则resizable实例不能使用。默认值 false
distance : 1, //以像素为单位，当发生鼠标点击手柄改变大小，延迟多少像素后才激活事件。默认值 1
ghost : true, //如果设置为true，则在调整元素大小时，有一个半透明的辅助对象显示。默认值 false
grid : false, //设置元素调整的大小随网格变化，允许的数据为数组：[数值,数值]。默认值 false
handles : "e, s, se", //设置resizable插件允许生成在元素的哪个边上，可选值：n, e, s, w, ne, se, sw, nw, all。默认值 "e, s, se"
helper : "resizable-helper", //一个CSS类，当调整元素大小时，将被添加到辅助元素中，一但调整结束则恢复正常。默认值 false
maxHeight : 1500, //设置允许元素调整的最大高度。默认值 null
maxWidth : 1500, //设置允许元素调整的最大宽度。默认值 null
minHeight : 10, //设置允许元素调整的最小高度。默认值 10
minWidth : 10, //设置允许元素调整的最小宽度。默认值 10
//=================事件
create : function(event, ui) { //当创建resizable时触发
//alert("this is create");
},
start : function(event, ui) { //当元素调整动作开始时触发。
//alert("this is start");
},
resize : function(event, ui) { //当元素调整动作过程中触发。
//alert("this is resize");
},
stop : function(event, ui) { //当元素调整动作结束时触发。
//alert("this is stop");
}
});
function resizable_fun(){
//=================方法
//$("#resizable_div").resizable("destroy"); //从元素中移除缩放功能。
$("#resizable_div").resizable("disable"); //禁用元素的缩放功能。
$("#resizable_div").resizable("enable"); //开启元素的缩放功能。
$("#resizable_div").resizable("option","disabled",false); //为指定属性赋值，第二参数为resizable的一个属性名，第三参数为可以为该属性赋的值
$("#resizable_div").resizable("option","disabled"); //获取指定属性的值，第二参数为resizable的一个属性名
$("#resizable_div").resizable("widget"); //返回该可缩放元素的JQuery对象
}
</script>
<!--==============================selectable==========================-->
<!--==================================================================-->
<!--
创建多选实例前必须至少先指定两个css类的背景色 .ui-selecting .ui-selected 分别是在可选元素被选择时，和选定后添加的css类
并且为了灵活定义多个可多选部分不同的样式，在定义该css类时最好加上所属作用范围这里是#selectable_div
-->
<style>
#selectable_div .ui-selecting { background: #FECA40; }/*选择某个项目时添加该css类*/
#selectable_div .ui-selected { background: #F39814; }/*选定了某个项目时添加该css类*/
/*这个样式类则显得不那么重要了，可以不设定，可被多选的元素将添加该css类*/
.ui-selectee { background: white; }
</style>
<input type="button" value="selectable_fun" onclick="selectable_fun();" />
<!--通过按 Ctrl 可以点击选择多项-->
<div id="selectable_div">
<div class="ui-widget-content">Item 1</div>
<div class="ui-widget-content">Item 2</div>
<div class="ui-widget-content">Item 3</div>
<div class="ui-widget-content">Item 4</div>
<div class="ui-widget-content">Item 5</div>
<div class="ui-widget-content">Item 6</div>
<div class="ui-widget-content">Item 7</div>
<div class="ui-widget-content">Item 8</div>
<div class="ui-widget-content">Item 9</div>
</div>
<script language="JavaScript" type="text/javascript">
$("#selectable_div").selectable({
//=================属性
appendTo : "body", //指定选择过程中将辅助元素追加到何处。默认值 "body"
autoRefresh : true, //决定是否在每次选择动作时，都重新计算每个选择元素的坐标和大小。如果你有很多个选择项的话，建议设置成false并通过方法手动刷新。默认值 true
cancel : "textarea,button,select,option", //防止在与选择器相匹配的元素上发生选择动作。默认值 "input,textarea,button,select,option"
delay : 0, //以毫秒为单位，设置延迟多久才激活选择动作。此参数可防止误点击。默认值 0
disabled : false, //如果选择true则该selectable实例将不能使用。默认值 false
distance : 0, //决定至少要在元素上面拖动多少像素后，才正式触发选择的动作。默认值 0
filter : "*", //设置哪些子元素才可以被选择。默认值 "*"
tolerance : "touch", //可选值："touch", "fit"，分别代表完全和部署覆盖元素即触发选择动作。默认值 "touch"
//=================事件
create :function(event, ui) {
//alert("this is create"); //当创建selectable时触发
},
selected :function(event, ui) { //当选定某一个元素后触发此事件。
//alert("this is selected");
},
selecting :function(event, ui) { //当选择某一个元素中时触发此事件。
//alert("this is selecting");
},
start :function(event, ui) { //当选择一个元素前触发此事件。
//alert("this is start");
},
stop :function(event, ui) { //当选定一个元素结束时触发此事件。
//alert("this is stop");
},
unselected :function(event, ui) { //当取消选定某一个元素后触发此事件。
//alert("this is unselected");
},
unselecting :function(event, ui) { //当取消选定某一个元素中触发此事件。
//alert("this is unselecting");
}
});
function selectable_fun(){
//=================方法
//$("#selectable_div").selectable("destroy"); //销毁元素多选功能实例
$("#selectable_div").selectable("disable"); //禁用元素的多选功能。
$("#selectable_div").selectable("enable"); //启用元素的多选功能。
$("#selectable_div").selectable("option","disabled",true);//为指定属性赋值，第二参数为selectable的一个属性名，第三参数为可以为该属性赋的值
$("#selectable_div").selectable("option","disabled"); //获取指定属性的值，第二参数为selectable的一个属性名
$("#selectable_div").selectable("refresh"); //用于手动刷新、重新计算每个选中元素的位置和大小。当autoRefresh设置成false，此方法对于刷新大量选中项非常有用。
$("#selectable_div").selectable("widget"); //返回该可多选元素的JQuery对象
}
</script>
<!--==============================sortable============================-->
<!--==================================================================-->
<input type="button" value="sortable_fun" onclick="sortable_fun();" />
<div id="sortable_div">
<div class="ui-state-default">Item 1</div>
<div class="ui-state-default">Item 2</div>
<div class="ui-state-default">Item 3</div>
<div class="ui-state-default">Item 4</div>
<div class="ui-state-default">Item 5</div>
<div class="ui-state-default">Item 6</div>
<div class="ui-state-default">Item 7</div>
</div>
<script language="JavaScript" type="text/javascript">
$("#sortable_div").sortable({
//=================属性
appendTo : "parent", //指定排序过程中将辅助元素追加到何处。默认值 "parent"
axis : "y", //指定条目的拖动方向。可选值："x", "y"。默认值 false
cancel : ":input,button", //指定禁止排序的元素。默认值 ":input,button"
connectWith : false, //允许排序列表连接另一个排序列表，将条目拖动至另一个列表中去，可用JQuery选择器形式。默认值 false
containment : false, //约束排序动作只能在一个指定的范围内发生。可选值：DOM对象, "parent", "document", "window", 或jQuery对象。默认值 false
cursor : "move", //指定排序时鼠标的CSS样式。默认值 "auto"
cursorAt : { //指定拖动条目时，光标出现的位置，取值是对象，可以包含top、left、right、Bottom属性中的一个或两个。 默认值 false
top:5,
left: 5
},
delay : 0, //以毫秒为单位，设置延迟多久才激活排序动作。此参数可防止误点击。默认值 0
disabled : false, //当设为true时该排序实例将不可用。默认值 false
distance : 1, //决定至少要在元素上面拖动多少像素后，才正式触发排序动作。默认值 1
dropOnEmpty : true, //是否允許拖拽到一個空列表的sortable对象中。默认值 true
forceHelperSize : false, //是否强制辅助元素具有尺寸。默认值 false
forcePlaceholderSize : false, //是否强制占有符具有尺寸。默认值 false
grid : [ 20, 10 ], //使条目或辅助元素对齐网格，取值为数组 [数值,数值] 分别表示网格的宽度和高度。默认值 false
handle : false, //指定条目的拖动手柄，可用JQuery选择器形式。默认值 false
helper : "original", //指定显示的辅助元素，可选值："original"或"clone"，若为函数则函数返回一个DOM元素。默认值 "original"
items : "> *", //指定列表中可以排序的条目。默认值 "> *"
opacity : 0.5, //指定辅助元素的不透明度0.01~1。默认值 false
placeholder : "sortable-placeholder", //指定排序时，空白占位的CSS样式。默认值 false
revert : true, //是否支持动画效果，或指定动画毫秒数。默认值 false
scroll : true, //是否元素拖动到边缘时自动滚动。默认值 true
scrollSensitivity : 20, //指定元素拖动到距离边缘多少像素时开始滚动。默认值 20
scrollSpeed : 20, //指定滚动的速度。默认值 20
tolerance : "intersect", //设置拖动元素拖动多少距离时开始排序，可选值："intersect"和"pointer"，前者表示重叠50%，后者表示重叠。默认值 "intersect"
zIndex : 1000, //指定辅助元素的z-Index值。默认值 1000
//=================事件
create :function(event, ui) { //当创建sortable实例时触发
//alert("this is create");
},
start :function(event, ui) { //当开始排序时触发
//alert("this is start");
},
sort :function(event, ui) { //当排序期间触发
//alert("this is sort");
},
change :function(event, ui) { //当元素发生排序且坐标已发生改变时触发此事件。
//alert("this is change");
},
beforeStop :function(event, ui) { //当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。
//alert("this is beforeStop");
},
stop :function(event, ui) { //排序动作结束时触发此事件。
//alert("this is stop");
},
update :function(event, ui) { //当排序动作结束时且元素坐标已经发生改变时触发此事件。
//alert("this is update");
},
receive :function(event, ui) { //当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。
//alert("this is receive");
},
remove :function(event, ui) { //当一个元素从一个sortable对象拖了出来，并进入另一个sortable对象时触发
//alert("this is remove");
},
over :function(event, ui) { //当一个元素拖拽移动时覆盖其他元素位置时触发此事件。
//alert("this is over");
},
out :function(event, ui) { //当一个元素拖拽移出原位置并再次确定位置后，或移动超出sortable对象位置范围时触发此事件。
//alert("this is out");
},
activate :function(event, ui) { //当一个sortable对象开始排序动作时，该事件关联到所有与该实例连接着的排序列表。
//alert("this is activate");
},
deactivate :function(event, ui) { //当排序停止后触发，该事件关联到所有与该实例连接着的排序列表
//alert("this is deactivate");
}
});
function sortable_fun(){
//=================方法
$("#sortable_div").sortable( "cancel" ); //取消当前sortable对象中item元素的排序改变。
//$("#sortable_div").sortable( "destroy" ); //销毁该sortable对象。
$("#sortable_div").sortable( "disable" ); //禁用该sortable对象排序功能
$("#sortable_div").sortable( "enable" ); //开启该sortable对象排序功能
$("#sortable_div").sortable( "option" , "disabled" , false ); //为指定属性赋值，第二参数为sortable的一个属性名，第三参数为可以为该属性赋的值
$("#sortable_div").sortable( "option" , "disabled" ); //获取指定属性的值，第二参数为sortable的一个属性名
$("#sortable_div").sortable( "refresh" ); //刷新排序的元素。触发重新加载的所有排序的元素，使新元素可用。
$("#sortable_div").sortable( "refreshPositions" ); //刷新排序条目的缓存位置
$("#sortable_div").sortable( "serialize", { key: "sort" } ); //将项目ID排序成一个form或ajax的提交字符串，提交时key对应的值相当表单中的元素名，调用此方法产生的哈希值，可以附加到任何URL
$("#sortable_div").sortable( "toArray" ); //将排序的条目id序列化成字符串数组
$("#sortable_div").sortable( "widget" ); //返回该排序的JQuery对象
}
</script>
标签：
原文地址：http://www.cnblogs.com/theWayToAce/p/5534330.html
