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});