文档介绍:JQuery UI 总结
Draggable 拖放:
组件:
jQuery-
例子:
$(“#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,,[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