JQUERY 拖拽 draggable droppable resizable selectable sortable

浏览数：40 / 时间：2015年06月09日

今天用了jq ui的拖动碰撞功能，好不容易看到有详细的API解说，记录如下：

<p>Drag me around</p>

<br/>

i can fly!

</div>

$("#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>

</div>

$("#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>

<h3 class="ui-widget-header">Resizable</h3>

</div>

$("#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>

<!--

创建多选实例前必须至少先指定两个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>

</div>

$("#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>

</div>

$("#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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQUERY 拖拽 draggable droppable resizable selectable sortable

标签： des class style java src 使用 log html 数据 des class style java src 使用 log html 数据

JQUERY 拖拽 draggable droppable resizable selectable sortable

今天用了jq ui的拖动碰撞功能，好不容易看到有详细的API解说，记录如下：

相关文章

随机文章

您可能还喜欢

您可能还喜欢

最新图文

您可能还喜欢

您可能还喜欢

文摘排行

文章排行

推荐文章

图文排行

推荐图文