mass Framework draggable插件

這個插件一再延期，花了我幾周的時間，參考了不少實現，終於實現得比jQuery ui的draggable還強大。之所以說它強大，是因為支持多點拖動（同時能拖動多個方塊），並支持事件代理方式監聽以后可能出現的拖動塊。

請等博客左上角的FLASH時鍾動畫出現后才進行拖動。你可以一個個拖動它們，也可以單擊它們當中的某些，讓它們變成綠色后，進行多點拖動。

更多的例子請見github上的文檔我在github的文檔，那里有十來個例子，如一格格地拖動，按沿着圖的軌跡拖動，生成幽靈元素進行影子拖動，通過手柄進行拖動，區域拖動，應有盡有……

draggable文檔：

$.fn.draggable(settings)

參數：

settings

可選。用於配置控件對象。但當這個對象第二次調用它時， 只有當其第一個參數為字符串或對象才有效，這樣相當於調用其方法或重寫一些屬性。

返回值：

mass實例

settings的配置參數：

• containment：規定拖動塊可活動的范圍。有五種情況.
  • 如果是一個CSS表達式，將會通過選擇器引擎找到第一個符合它的那個元素節點。
  • 如果是一個mass的節點鏈對象,取得其第一個元素。
  • 如果是一個元素節點，取其左上角與右下角的坐標。
  • 如果是一個包含四個數字的數組，分別是[x1,y1,x2,y2]
  • 如果是這三個字符串之一：parent,document,window，顧名思義，parent就是其父節點， document就是文檔對象，取其左上角與右下角的坐標。
• noCursor：boolean 默認false。拖動時我們基本都會給個標識說明它能拖動，一般是改變其光標的樣式為move，但如果不想改變這個樣式， 或者你自己已經用圖標做了一個好看的光標了，那么就設置它為true吧。
• live：boolean 如果為true，則使用事件代理。
• lockX：boolean 默認false。當值為true時，鎖定X軸，只允許上下移動。
• lockY：boolean 默認false。當值為true時，鎖定Y軸，只允許左右移動。
• handle：string 手柄的類名，當設置了此參數后，只允許用手柄拖動元素。
• ghosting：boolean 默認false。當值為true時，會生成一個幽靈元素，拖動時只拖動幽靈，以減輕內存消耗。 此幽靈元素擁有一個名為mass_ghosting的類名，半透明。
• rewind：boolean 默認false。當值為true時，讓拖動元素在拖動后回到原來的位置。。
• strict：boolean 默認true。當值為true時，監視鼠標的位置，一旦超過出拖動塊就立即停止。
• scroll：boolean 默認false。當值為true時，允許滾動條隨拖動元素移動。
• click：function 默認為false。當我們點擊頁面時依次發生的事件為mousedown mouseup click 但有時我們想在點擊后做一些事情才拖動元素，這時就需要將click設置為false，意即阻止瀏覽器的默認行為
• dragstart：function 在拖動前鼠標按下的那一瞬執行。
• drag：function 在拖動時執行。
• dragend：function 在拖動后鼠標彈起的那一瞬執行。
• addClasses：boolean 是否為正在拖動的元素添加一個叫mass_dragging的類名，它會在拖動結束自動移除，默認是true。
• duration：Number 當ghosting或rewind為true，它會執行一個平滑的動畫到目的地，這是它的持續時間，默認是500ms。

drag, dragstart, dragend這三個都是HTML5標准的原生事件名稱。

生成拖動對象擁有以下屬性：

• lockX: 鎖定X軸
• lockY: 鎖定Y軸
• multi: ArrayLike, 一個節點數組或節點集合，你可以在dragstart時設置它;比如:

                  $(".blue").draggable({//每次用戶只能拖動一個
                      dragstart:function(e, dd){
                          dd.multi = $('.red');//但程序能幫你帶上這幾個移動
                      }
                  });
          

  意思是在拖動當前那1個藍色的方塊的同時,順帶拖動所有匹配.red類名的紅色方塊元素。
• startX:Number, mousedown事件發生時得到的event.pageX;
• startY:Number, mousedown事件發生時得到的event.pageY;
• originalX:Number, mousedown事件發生時元素相對於頁面的X坐標;
• originalY:Number, mousedown事件發生時元素相對於頁面的Y坐標;
• deltaX :Number,當前鼠標與startX的距離
• deltaX :Number,當前鼠標與startY的距離
• offsetX:Number, mousemove事件發生時元素相對於頁面的X坐標;
• offsetY:Number, mousemove事件發生時元素相對於頁面的Y坐標;
• target:當前元素。

通過點擊選中一起要拖動的方塊，再拖動它們。

先

點

擊

我

，

變

成

鮮

綠

色

再

拖

動

我

們

            $.require("ready,more/draggable",function(){
                $(".drag").click(function(){
                    $( this ).toggleClass("selected");
                }).draggable({
                    dragstart:function(e, dd){
                        dd.multi = $('.selected');
                    }
                });
            });
        

mass Framework在github上的地址