jQuery UI擴展可拖動的「捕捉」行

Question

我想要擴展元素將捕捉到使用jQuery UI的可拖動功能的區域。截至目前，我可以得到元素通過使用這個基本代碼捕捉到另一個要素：

$('.drag').draggable({ 
    containment: 'parent', 
    snap: true 
}); 

我遇到的問題是，一旦我拖一個元素遠離其他的，我失去了捕捉功能。有沒有一種方法可以擴展確定在何處捕捉的線？

例如，假設我們有3個元素，並且我想在同一個垂直軸上對齊所有三個元素。該軸始終是任何元素的左側，並隨它們一起移動。無論元素＃2或＃3的垂直位置如何，我都可以捕捉元素＃1的垂直軸嗎？

[Element #1] |     | 
|    |     | 
|    |     | 
|<-- Snap to here regardless of "y" location 
|    |     | 
|    |     | 
|    [Element #2]  | 
|    |     | 
|    |<-- Or to here | 
|    |     [Element #3] 
|    |     | 
|    |     |<-- Or to here 

我嘗試添加頂部和底部邊緣到每個元件的延長線，但因爲添加的利潤率，我無法垂直父容器內移動的元素。

這裏是一個小提琴，以更好地說明我想要完成的事情。 http://jsfiddle.net/3KNSn/

謝謝！

Answer 1

您可以創建一個特殊的拖動參考對象來充當您的抓取軸。

Live Demo

$(function() { 
    $('.drag').draggable({ 
     stop: function (event, ui) { 
      // Remove any pre-existing drag references 
      $('.drag-reference').remove(); 

      $('.drag').each(function (i, item) { 
       var $reference = $('<div>', { 'class': 'drag-reference' }); 
       var $elem = $(item); 
       var $container = $elem.parent(); 
       var position = $elem.position(); 
       var left = position.left + 'px'; 

       $reference.insertBefore($elem); 
       $reference.css({ 
        top: 0, 
        left: left, 
        height: $container.height() 
       }); 
      }); 
     }, 
     containment: 'parent', 
     snap: '.drag-reference, .drag' 
    }); 
}); 

我對.drag引用對象紅色邊框只是向你展示他們是如何工作的，但如果您刪除邊框，你應該有你想要的，沒有可見的文物行爲放棄你的詭計。