1、Draggable 拖放:
组件：
jQuery-1.3.2.js ui.core.js ui.draggable.js
例子：
$(“#draggable”).draggable( );
属性：
addClass : true/false 阻止拖放元素的时候添加样式，默认true
appendTo: Element,Selector 拖放元素拖放去处.默认 ‘parent
axia :String 空间上沿 X 轴，还是 Y轴拖放 默认’false’ 只能选 ‘x’, ‘y’ 一个
cancel :Selector 阻止拖放某些元素 默认 ‘input ,option’
$('.selector').draggable({ cancel: 'button' });
connectToSortable: Selector可以把复制后的对象元素直接动态添加到ul#myList上去..
默认 false
$('.selector').draggable({ connectToSortable: 'ul#myList' });
Containment: Selector, Element, String,Array Default:false
把拖放的对象固定在一个区域中拖放，如parent,document.window,[x1,y1,x2,y2],重要属性.
$('.d7').draggable({ containment:'#myList'})
Cusor: string Default:’auto’
改变拖放时候的鼠标样式,样式详见 CSS cursor:属性,常用 crosshair, and…
CusorAt Object Default:false
设置拖动时候鼠标一直会所在的位置..top ,left ,right,bottom
$(“.selector”).draggable({cursorAt: {left: 5} });
Delay Integer Default:0
停顿多少毫秒后按住鼠标才能拖动元素..
$(“.selector”).draggable ({ delay:500})
Distance Integer Default:1
,鼠标移动元素之前必须要动多少的距离，也就是鼠标上来必须移动200px，元素才能动
$(“.selector”).draggable(‘distance’,’200’);
Grid Array Default:false
网格坐标形状的移动.等于说每次移动 left:50, top:20;
$('.d5').draggable({ grid:[50,20]});
Handle Element,Selector Default:false
严格限制拖拽的对象为<h2>元素
$(‘.selector’).draggable({hande:’h2’})
Helper String,Function Default:’original’
拖动的时候可以看见对象的一个副本,而不是拖动本身.. original不出现副本..
$(‘.selector’).draggable({helper:’clone’})
iframeFix Boolean,Selector Default:false
位置属性，不过是用在框架上的..
Opacity Float Default:false
当拖动的时候透明度改变…
$(‘.selector’).draggable({opacity:0.25});
refreshPosition Boolean Defautl:false
未知应用属性
Revert Boolean,String Default:false
如果设置为true,当拖动的时候这个元素将会返回它的原始位置，string类型’valid’,’invalid’
如果设置成 invalid ,如果拖放元素落在droppable上revert将会出现, 若为 valid ,其他方式…
$(“.selector”).draggable({revert::true})
ReverDuration Interger Default:500
/*返回原来的单位所花的时间,要和revert:true 合用..*/
$('.d5').draggable({ revertDuration:100 ,revert:true})
Scope String Default:true
用来设置拖放和投放元素组,拖放元素和投放元素间相互转换...也不知道是干啥的...*/未知应用属性,
Scroll Boolean Default:true;
/* 如果设置为true,容器在拖放的时候自动滚动, 汗...*/
scrollSensitivity Interger Default:20
/*搞不懂Scroll 属性是干什么的….*/
scrollSpeed Integer Default:20
/*未知*/
Snap Boolean,Selector Default:false
跟目标元素贴边,设为true 目标元素和所有元素都会贴边..
$(“.selector”) . draggable ({ snap:true })
snapMode String Default:’both’
设置和其他元素贴边的方式…..”outer”,’inner’,’both’..
$(‘.selector’).draggable({snapMode:’over’})
snapTolerance Integer Default:20
,鼠标移动元素和贴边的元素距离多少的时候，自动贴边..
$(‘.selector’).draggable({snapTolerance:40})
zIndex Integer Default
设置拖放元素的绝对拖放层数…..
$(“.selector”).draggable({ zIndex:2700 })
Stack Object Default
设置某些层的绝对层数，以至于其他的拖放元素不会在他上面，只能在他下面…
因为拖放元素的层数默认设置的是谁最先调用draggable,这个元素就会在最下面..而stack可以改变这个默认行为
$(“.selector”).draggable({stack:{group:”#set div”,min: 1}})
事件
Start 拖放开始时候触发事件
$(“.selector”).draggable( {
Start:function( event, ui ){ }
} )
Drag 拖放的时候触发事件
$(“.selector”).draggable( {
Drag:function( event , ui){ }
})
Stop 拖放停止的时候触发事件
$(“.selector”).draggable( {
Stop:function (event, ui){ }
})
方法
.draggable (“ destroy ”) 销毁对象
.draggable (“ disable ”) 使对象无用
.draggable (“ enable ” ) 是对象有用
.draggable (‘option’, optionName, [value] )
2、droppable 抛下区域
组件：
jQuery-1.3.2.js ui.core.js ui.droppable.js
例子：
$(“#draggable”).draggable( );
属性：
Accept selector,Function Default:”*”
放置区域只接受那些贴有标签的元素
$(“.selector”).droppable({ accept: ‘.special’ })
activeClass String Default:false
当draggable元素被拖动的时候，droppable元素添加class样式
$(“.selector”).droppable( { activeClass : ’ .ui-state-highlight ’ } )
addClasses Boolean Default:true
addClass : true/false 阻止抛下区域在其他元素拖放的时候添加样式，默认true
$(‘.selector’).droppable( { addClasses:false } );
Greedy Boolean Default:false
Greedy ，比如在一个div中嵌套一个 p的时候，把拖放元素放到p上，一般会也会触发div的函数，所以当greedy:设置为true 的时候，div函数就出发..实用属性
Scope String Default:’default’
未知..
Tolerance String Default:’intersect’
做测试用… fit, intersect ,pointer, touch
事件
Activate 这个事件只要拖放draggable开始时候就会触发,如果你想使droppable在拖动的时候高亮就会有用
$(‘.selector’).droppable( { active: function(event ,ui )} )
Deactivate 停止拖动的时候就会触发.
$(‘.selector’).droppable( { deactivate:function(event, ui) { }}
Over hover 自己理解
Out 溢出droppable 元素的时候触发…
Drop 把draggable放到droppable 区域中区。
方法：
.draggable (“ destroy ”) 销毁对象
.draggable (“ disable ”) 使对象无用
.draggable (“ enable ” ) 使对象有用
.draggable (‘option’, optionName, [value] )
3、Resizable 设置大小
组件：
jQuery-1.3.2.js ui.core.js ui.resizable.js
例子：
$(“#resizable”).resizable( );
属性
alsoResize selector,jQuery,Element Default:false
当改变大小的时候同时改变通属性的元素
$( ‘.selector’ ).resizeable( {alsoResize : ‘.other’ } )
Animate Boolean Default
动态改变元素对象大小，很漂亮
$(“.selector”).resizable({ animate : true })
animateDuration Integer,String Default:’slow’
和animate合用，用来设置改变元素大小的时间,slow, normal,fast, 三档，还可以设置数值
$(“.selector”).resizable ({animate:true , animateDuration:500 })
animateEasing String Default:”swing”
直接怀疑是不是有这个改变效果…
aspectRatio Boolean,Float Default:false
按你设置的比例值进行拖放改变
$(‘.selector’) .resizable( { aspectRatio:.75} ) 9/16 宽高设置
autoHide Boolean Default:false
可以隐藏显示拖拉小箭头的东西,设置为true的时候，小箭头隐藏..
Cancel Selector Default:’ input ,option’
阻止拖放某些元素 默认 ‘input ,option’
$('.selector').resizable({ cancel: 'button' });
Containment: Selector, Element, String,Array Default:false
把拖放的对象固定在一个区域中改变大小，如parent,document.window,[x1,y1,x2,y2],重要属性…
$( ‘.selector’).resizable ({ containment: ‘parent ’} );
Delay Integer Default:0
停顿多少毫秒后按住鼠标才能改变元素大小..
$(“.selector”).resizable ({ delay:500})
Distance Integer Default:1
,鼠标移动元素之前必须要改变多少的距离，也就是鼠标必须拖拉移动200px，元素才改变大小
$(“.selector”).resizable(‘distance’,’200’);
Ghost Boolean Default:false
很奇特的一个属性..
$(‘.selector’).resizable({ ghost : true } );
Grid Array Default:false
网格坐标形状的改变大小，.等于说每次改变大小 left:50, top:20;
$('.d5').resizable({ grid:[50,20]});
Handles String,Object Default: ”e, s, se”
$(“.selector”).resizable ({ handles: ‘ n, e, s, w ’ })；
一旦设置，前后左右均能拖放，但不能斜角拖放*/
Helper String Default: false
//拖放的时候可以增加的css效果..很难用上..
另：
$("#resizable").resizable({
maxHeight: 250,
maxWidth: 350,
minHeight: 150,
minWidth: 200
//很有用的四个控制属性....
});
事件：
Start Type: resizestart
Resize Type:resize
Resize Type:resize
Stop Type:resizestop
方法:
.resizable (“ destroy ”) 销毁对象
.resizable (“ disable ”) 使对象无用
.resizable (“ enable ” ) 使对象有用
.resizable (‘option’, optionName, [value] )
4、selectable ol,ul列表选择
组件：
jQuery-1.3.2.js ui.core.js ui.selectable.js
例子：
$(“#selectable”).selectable( );
属性：
autoRefresh Boolean Default:true
未知属性..
Cancel Selector Default:’ input ,option’
阻止可以点击某些元素 默认 ‘input ,option’
$('.selector').resizable({ cancel: 'button' });
Delay Integer Default:0
延迟点击效果,不过效果好像出不来…建议弃用,因为如果按照鼠标出现多选框的时候，这个东西是没有用的...
Distance integer Default:0
/* distance:20 在像素上,selecting将会触发..可是..在那里的像素？*/难用元素
Filter Selector Default: “*”
/*过滤那点元素..*/
Tolerance String Default:”touch”
tolerance:touch.. fit 不允许用鼠标弄多选框的,重要项...
事件：
Selected Type:selected
Selecting Type:selecting
Start Type:selectablestart
Stop Type:selectablestop
Unselected Type:unselected
Unselecting Type:unselecting
这几个事件触发情况具体到项目的时候理解最好。
方法:
.selectable (“ destroy ”) 销毁对象
.selectable (“ disable ”) 使对象无用
.selectable (“ enable ” ) 使对象有用
.selectable (‘option’, optionName, [value] )
.selectable (‘refresh’) 能够刷新每个改变size的元素..不过怎么用不知道
如果您觉得本文的内容对您的学习有所帮助：
关键字：
CSS3