jQuery UI-Draggable 参数集合

时间 2019-12-09

原文原文链接

·概述
在任何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] )javascript

<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>