demo解析

resizable：改變圖片形狀
containment：控制在一個(gè)范圍內(nèi)
$("#resizable").resizable({ containment: '.ey_show_a' });

draggable：拖動(dòng)位置
containment：控制在一個(gè)范圍內(nèi)
$("#resizable").draggable({ containment: '.ey_show_a' });

draggable參數(shù)·概述

在任何DOM元素啟用拖動(dòng)功能咒钟。通過單擊鼠標(biāo)并拖動(dòng)對(duì)象在窗口內(nèi)的任何地方移動(dòng)性含。
官方示例地址：http://jqueryui.com/demos/draggable/

所有的事件回調(diào)函數(shù)都有兩個(gè)參數(shù)：event和ui举哟，瀏覽器自有event對(duì)象厚柳，和經(jīng)過封裝的ui對(duì)象
ui.helper - 表示被拖拽的元素的JQuery對(duì)象
ui.position - 表示相對(duì)當(dāng)前對(duì)象贬循，鼠標(biāo)的坐標(biāo)值對(duì)象{top,left}
ui.offset - 表示相對(duì)于當(dāng)前頁面斧账，鼠標(biāo)的坐標(biāo)值對(duì)象{top,left}

·參數(shù)（參數(shù)名 : 參數(shù)類型 : 默認(rèn)值）
addClasses : Boolean : true
如果設(shè)置成false，將在加載時(shí)阻止ui-draggable樣式的加載寇钉。
當(dāng)有很多對(duì)象要加載draggable()插件的情況下搏恤，這將對(duì)性能有極大的優(yōu)化违寿。
初始: ('.selector').draggable('option', 'addClasses');
設(shè)置: $('.selector').draggable('option', 'addClasses', false);

appendTo : Element,Selector : 'parent'
The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.
初始：('.selector').draggable('option', 'appendTo');
設(shè)置：$('.selector').draggable('option', 'appendTo', 'body');

axis : String : false
約束拖動(dòng)的動(dòng)作只能在X軸或Y軸上執(zhí)行熟空，可選值：'x', 'y'藤巢。
初始：('.selector').draggable('option', 'axis');
設(shè)置：$('.selector').draggable('option', 'axis', 'x');

cancel : Selector : ':input,option'
防止在指定的對(duì)象上開始拖動(dòng)息罗。
初始：('.selector').draggable('option', 'cancel');
設(shè)置：$('.selector').draggable('option', 'cancel', 'button');

connectToSortable : Selector : false
允許draggable被拖拽到指定的sortables中，如果使用此選項(xiàng)helper屬性必須設(shè)置成clone才能正常工作迈喉。
初始：('.selector').draggable('option', 'connectToSortable');
設(shè)置：$('.selector').draggable('option', 'connectToSortable', 'ul#myList');

containment : Selector,Element,String, Array : false
強(qiáng)制draggable只允許在指定元素或區(qū)域的范圍內(nèi)移動(dòng)，可選值：'parent', 'document', 'window', [x1, y1, x2, y2].
初始：('.selector').draggable('option', 'containment');
設(shè)置：$('.selector').draggable('option', 'containment', 'parent');

cursor : String : 'auto'
指定在做拖拽動(dòng)作時(shí)孩革，鼠標(biāo)的CSS樣式。
初始：('.selector').draggable('option', 'cursor');
設(shè)置：$('.selector').draggable('option', 'cursor', 'crosshair');

cursorAt : Object : false
當(dāng)開始移動(dòng)時(shí)膝蜈，鼠標(biāo)定位在的某個(gè)位置上（最多兩個(gè)方向）∪鄄簦可選值：{ top, left, right, bottom }.
初始：('.selector').draggable('option', 'cursorAt');
設(shè)置：$('.selector').draggable('option', 'cursorAt', { left: 5 });

delay : Integer : 0
當(dāng)鼠標(biāo)點(diǎn)下后，延遲指定時(shí)間后才開始激活拖拽動(dòng)作（單位：毫秒）置逻。此選項(xiàng)可以用來防止不想要的拖累元素時(shí)的誤點(diǎn)擊推沸。
初始：('.selector').draggable('option', 'delay');
設(shè)置：$('.selector').draggable('option', 'delay', 500);

distance : Integer : 1
當(dāng)鼠標(biāo)點(diǎn)下后券坞，只有移動(dòng)指定像素后才開始激活拖拽動(dòng)作鬓催。
初始：('.selector').draggable('option', 'distance');
設(shè)置：$('.selector').draggable('option', 'distance', 30);

grid : Array : false
拖拽元素時(shí)报慕，只能以指定大小的方格進(jìn)行拖動(dòng)深浮。可選值：[x,y]
初始：('.selector').draggable('option', 'grid');
設(shè)置：$('.selector').draggable('option', 'grid', [50, 20]);

handle : Element, Selector : false
限制只能在拖拽元素內(nèi)的指定元素開始拖拽飞苇。
初始：('.selector').draggable('option', 'handle');
設(shè)置：$('.selector').draggable('option', 'handle', 'h2');

helper : String, Function : 'original'
拖拽元素時(shí)的顯示方式蜗顽。（如果是函數(shù)布卡，必須返回值是一個(gè)DOM元素）可選值：'original', 'clone', Function
初始：('.selector').draggable('option', 'helper');
設(shè)置：$('.selector').draggable('option', 'helper', 'clone');

iframeFix : Boolean, Selector : false
可防止當(dāng)mouseover事件觸發(fā)拖拽動(dòng)作時(shí)雇盖，移動(dòng)過iframes并捕獲到它（內(nèi)部?jī)?nèi)容）忿等，如果設(shè)置成true，則屏蔽層會(huì)覆蓋頁面的iframe崔挖。如果設(shè)置成對(duì)應(yīng)的選擇器贸街，則屏蔽層會(huì)覆蓋相匹配的iframe庵寞。
初始：('.selector').draggable('option', 'iframeFix');
設(shè)置：$('.selector').draggable('option', 'iframeFix', true);

opacity : Float : false
當(dāng)元素開始拖拽時(shí)薛匪，改變?cè)氐耐该鞫取?br> 初始：('.selector').draggable('option', 'opacity');
設(shè)置：$('.selector').draggable('option', 'opacity', 0.35);

refreshPositions : Boolean : false
如果設(shè)置成true，所有移動(dòng)過程中的坐標(biāo)都會(huì)被記錄逸尖。（注意：此功能將影響性能）
初始：('.selector').draggable('option', 'refreshPositions');
設(shè)置：$('.selector').draggable('option', 'refreshPositions', true);

revert : Boolean, String : false
當(dāng)元素拖拽結(jié)束后，元素回到原來的位置娇跟。
初始：('.selector').draggable('option', 'revert');
設(shè)置：$('.selector').draggable('option', 'revert', true);

revertDuration : Integer : 500
當(dāng)元素拖拽結(jié)束后，元素回到原來的位置的時(shí)間苞俘。（單位：毫秒）
初始：('.selector').draggable('option', 'revertDuration');
設(shè)置：$('.selector').draggable('option', 'revertDuration', 1000);

scope : String : 'default'
設(shè)置元素只允許拖拽到具有相同scope值的元素。
初始：('.selector').draggable('option', 'scope');
設(shè)置：$('.selector').draggable('option', 'scope', 'tasks');

scroll : Boolean : true
如果設(shè)置為true襟诸，元素拖拽至邊緣時(shí)，父容器將自動(dòng)滾動(dòng)基协。
初始：('.selector').draggable('option', 'scroll');
設(shè)置：$('.selector').draggable('option', 'scroll', false);

scrollSensitivity : Integer : 20
當(dāng)元素拖拽至邊緣時(shí)，父窗口一次滾動(dòng)的像素澜驮。
初始：('.selector').draggable('option', 'scrollSensitivity');
設(shè)置：$('.selector').draggable('option', 'scrollSensitivity', 40);

scrollSpeed : Integer : 20
當(dāng)元素拖拽至邊緣時(shí)，父窗口滾動(dòng)的速度杂穷。
初始：('.selector').draggable('option', 'scrollSpeed');
設(shè)置：$('.selector').draggable('option', 'scrollSpeed', 40);

snap : Boolean, Selector : false
當(dāng)設(shè)置為true或元素標(biāo)簽時(shí)，元素拖動(dòng)到其它元素的邊緣時(shí)耐量，會(huì)自動(dòng)吸附其它元素飞蚓。
初始：('.selector').draggable('option', 'snap');
設(shè)置：$('.selector').draggable('option', 'snap', 'span');

snapMode : String : 'both'
確定拖拽的元素吸附的模式廊蜒∨颗。可選值：'inner', 'outer', 'both'
初始：('.selector').draggable('option', 'snapMode');
設(shè)置：$('.selector').draggable('option', 'snapMode', 'outer');

snapTolerance : Integer : 20
確定拖拽的元素移動(dòng)至其它元素多少像素的距離時(shí)山叮，發(fā)生吸附的動(dòng)作著榴。
初始：('.selector').draggable('option', 'snapTolerance');
設(shè)置：$('.selector').draggable('option', 'snapTolerance', 40);

stack : Object : false
Controls the z-Index of the defined group (key 'group' in the hash, accepts jQuery selector) automatically, always brings to front the dragged item. Very useful in things like window managers. Optionally, a 'min' key can be set, so the zIndex cannot go below that value.
初始：('.selector').draggable('option', 'stack');
設(shè)置：$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });

zIndex : Integer : false
控制當(dāng)拖拽元素時(shí)脑又，改變?cè)氐膠-index值。
初始：('.selector').draggable('option', 'zIndex');
設(shè)置：$('.selector').draggable('option', 'zIndex', 2700);

·事件
start
當(dāng)鼠標(biāo)開始拖拽時(shí)问麸，觸發(fā)此事件往衷。
初始：('.selector').bind('dragstart', function(event, ui){...});

drag
當(dāng)鼠標(biāo)拖拽移動(dòng)時(shí)，觸發(fā)此事件口叙。
初始：('.selector').bind('drag', function(event, ui){...});

stop
當(dāng)鼠標(biāo)松開時(shí)炼绘，觸發(fā)此事件。
初始：('.selector').bind('dragstop', function(event, ui){...});

·方法
destory
從元素中移除拖拽功能妄田。
用法：.draggable( 'destroy' )

disable
禁用元素的拖拽功能。
用法：.draggable( 'disable' )

enable
啟用元素的拖拽功能驮捍。
用法：.draggable( 'enable' )

option
獲取或設(shè)置元素的參數(shù)疟呐。
用法：.draggable( 'option' , optionName , [value] )