Jquery UI 拖放
1.设置容器接受拖入 ( droppable )
addClasses: 用来设置是否添加ui-draggable样式.
appendTo: 设置追加到什么地方
axis: 设置拖动的方向
cancel, handle: 设置控制整个控件拖动动作的区域, cancel指定区域不能拖动, handle指定区域控制控件拖动.
connectToSortable: 需要和sortable集成.
containment: 设置控件可拖动范围
cursor, cursorAt: 设置拖动过程中, 鼠标的样式及相对空间自身的位置.
delay, distance: 设置拖动的延迟, delay设置延迟时间, distance设置延迟距离, 目的是防止误点击带来的不期望拖动.
grid: 设置拖动过程移动的单位(以小格的方式移动)
helper: 设置拖动过程中, 跟随鼠标移动的组件.
iframeFix: 解决拖动过程中与iframe层叠后的事件问题.
opacity: 拖动过程helper的不透明度.
refreshPositions: 设置后drop过程中, 鼠标每次移动都会计算位置.
revert, revertDuration: 设置撤销移动相关.
scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标.
scroll, scrollSensitivity, scrollSpeed: 设置拖动过程中带来的滚动条相关问题.
snap, snapMode, snapTolerance: 设置吸附的相关属性.
stack, zIndex: 设置控件的层次.
·概述
配合draggable插件，允许拖放到任何DOM元素内。
官方示例地址：http://www.doczj.com/doc/de79860f79563c1ec5da71c2.html /demos/droppable/
所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象
ui.draggable - 表示当前被拖拽的元素的JQuery对象
ui.helper - 表示当前被拖放的元素的JQuery对象
ui.position - 表示当前被拖拽的相对坐标值对象{top,left}
ui.offset - 表示当前被拖拽的元素的绝对坐标值对象{top,left}
·参数（参数名 : 参数类型 : 默认值）
accept : Selector, Function : '*'
仅允许符合适配器的元素激活拖放的事件。（如果是函数，则此函数会在页面上所有元素被调用，函数的返回值必须是布尔值。）
初始：$('.selector').droppable({ accept: '.special' });
获取：var accept = $('.selector').droppable('option', 'accept');
设置：$('.selector').droppable('option', 'accept', '.special');
activeClass : String : false
如果设置值，则当有拖拽事件发生时，为页面上所有允许（accept）的元素添加此样式。
初始：$('.selector').droppable({ activeClass: 'ui-state-highlight' });
获取：var activeClass = $('.selector').droppable('option', 'activeClass');
设置：$('.selector').droppable('option', 'activeClass', 'ui-state-highlight');
addClasses : Boolean : true
设置为false，可以阻止ui-droppable样式添加至可拖放的对象。（这样可以获取一定的性能优化）
初始：$('.selector').droppable({ addClasses: false });
获取：var addClasses = $('.selector').droppable('option', 'addClasses');
设置：$('.selector').droppable('option', 'addClasses', false);
greedy : Boolean : false
是否防止嵌套的droppable事件被传播。
初始：$('.selector').droppable({ greedy: true });
获取：var greedy = $('.selector').droppable('option', 'greedy');
设置：$('.selector').droppable('option', 'greedy', true);
hoverClass : String : false
当拖拽元素移至带有可拖放插件的元素上时，为元素添加指定的样式。
初始：$('.selector').droppable({ hoverClass: 'drophover' });
获取：var hoverClass = $('.selector').droppable('option', 'hoverClass');
设置：$('.selector').droppable('option', 'hoverClass', 'drophover');
scope : String : 'default'
设置元素只允许具有相同scope值拖拽元素激活此拖放元素。
初始：$('.selector').droppable({ scope: 'tasks' });
获取：var scope = $('.selector').droppable('option', 'scope');
设置：$('.selector').droppable('option', 'scope', 'tasks');
tolerance : String : 'intersect'
判断一个可拖拽元素被【放到】一个可拖放元素的判断模式。（可选值：'fit', 'intersect', 'pointer', 'touch'）
fit：拖拽元素完全覆盖拖放元素
intersect：拖拽元素至少50%覆盖拖放元素
pointer：鼠标指针重叠在可拖放元素上
touch：只要有任何重叠即发生
初始：$('.selector').droppable({ tolerance: 'fit' });
获取：var tolerance = $('.selector').droppable('option', 'tolerance');
设置：$('.selector').droppable('option', 'tolerance', 'fit');
·事件
activate
当任何可拖拽元素开始拖拽动作时激活此事件。
初始：$('.selector').droppable({ activate: function(event, ui) { ... } });
绑定：$('.selector').bind('dropactivate', function(event, ui) { ... });
deactivate
当任何可拖拽元素停止拖拽动作时激活此事件。
初始：$('.selector').droppable({ deactivate: function(event, ui) { ... } });
绑定：$('.selector').bind('dropdeactivate', function(event, ui) { ... });
over
当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素时激活。
初始：$('.selector').droppable({ over: function(event, ui) { ... } });
绑定：$('.selector').bind('dropover', function(event, ui) { ... });
out
当一个被允许（accept）的可拖拽元素移出可拖放元素时激活。
初始：$('.selector').droppable({ out: function(event, ui) { ... } });
绑定：$('.selector').bind('dropout', function(event, ui) { ... });
drop
当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素，松开鼠标时激活。
初始：$('.selector').droppable({ drop: function(event, ui) { ... } });
绑定：$('.selector').bind('drop', function(event, ui) { ... });
·方法
destory
从元素中移除拖拽功能。
用法：.droppable( 'destroy' )
disable
禁用元素的拖拽功能。
用法：.droppable( 'disable' )
enable
启用元素的拖拽功能。
用法：.droppable( 'enable' )
option
获取或设置元素的参数。
用法：.droppable( 'option' , optionName , [value] )
2.容器拖动
$(".block").draggable({
// axis:'x',//约束拖动的动作只能在水平(x轴)或垂直(y轴)上执行。可选值: "x", "y"。
cancle:'.outer',
containment:'#contain',//只能在指定元素内拖动
cursor:'crosshair',//指定在做拖拽动作时，鼠标的CSS样式。
cursorAt:{left:20,top:20},//设置拖动帮手相对于鼠标光标的偏移量。坐标可被指定为一个散列 使用的组合中的一个或两个键：{ top, left, right, bottom } 。
delay:0,//当鼠标按下后，指定时延迟间后才开始激活拖拽动作（单位：毫秒）。此选项可用来阻止当点击一个元素时可能发生的非期望拖动行为。默认为0
disabled:false,//如果该值设置为true，拖动特效将被禁用。默认值为false
distance:0,//当鼠标点下后，只有移动指定像素后才开始激活拖拽动作，单位为像素。
grid:[5,5],//拖拽元素时，只能以指定大小的方格进行拖动。数组形式为[ x, y ]。
handle:'',//当参数值为true时,只有在特定的元素上触发鼠标按下事件时，才可以拖动。只有被拖到元素的子元素才可以应用该参数。
/*helper:"clone",允许一个元素被用来进行拖动。
//支持多种类型
--String:如果值设置为"clone", 那么该元素将会被复制，并且被复制的元素将被拖动。
--Function: 当拖动时，函数将返回一个DOM元素以供使用。*/
opacity:.5,//当拖动时，拖动助手元素的不透明度。
refreshPositions:false,//如果设置为true， 所有的可拖动位置在每次鼠标移动时都会被计算。
revert:true,//当拖动停止时，元素是否要被重置到它的初始位置。
/*
* Boolean: 如果设置为true，当拖动停止时，元素位置将被重置。
* String: 如果设置为"invalid", 重置仅当拖动没有被放置于一个可放置的对象时才会发生。如果设置为"valid", 情况则相反。
* */
revertDuration:500,//动画重置时间, 单位为微秒。如果revert选项设置为false，则忽略动画重置时间，默认值为500
scroll:true,//如果设置为true, 当拖动时，div盒模型将自动翻滚。注：拖动超出浏览器的可视区域才会出现滚动条
scrollSensitivity:20,//离开可视区域边缘多少距离开始滚动。距离是相对指针进行计算的，而不是被拖到元素本身。如果scroll 选项设置为false，则不滚动。默认值：20
scrollSpeed:20,//当鼠标指针的值小于scrollSensitivity的值时，窗口滚动的速度。如果scroll选项设置为false，则该参数无效。默认值：20
snap:true,//决定一个元素是否应该吸附到其它元素上。
/* --Boolean: 当设置为 true时, 元素将可以吸附到所有其它可拖动元素上。
* --Selecter: 确定被吸附元素。
* */
snapMode:"both",//决定可拖动元素将要吸附到哪个元素的边缘。如果snap选项设置为false，则忽略该参数。 可选值: "inner", "outer", "both".
snapTolerance:20,//当距离可吸附元素多远时，触发吸附事件。如果snap选项设置为false，则忽略该参数。默认值：20
stack:false,//控制由选择器所触发的一系列元素的z-index值, 总是将当前被拖动对象至于最前。对于像窗口管理这样的应用来说，非常有用。
zIndex:99,//当被拖动时，拖动助手的Z-index值。默认值：false
create:function(event, ui ){},//当一般拖动组件被创建时触发。
drag:function(event,ui){},//当鼠标在拖动过程中移动时触发。
start:function(event,ui){},//当拖动开始时触发。
stop:function(event,ui){}//当拖动停止时触发。
});
$(".block").draggable("option","cursor","pointer");
$(".inner").draggable({scroll:true});
