Javascript jQuery UI扩展可拖动；Snap"；线

我试图使用jQueryUI的可拖动特性扩展元素将捕捉到的区域。现在，我可以使用以下基本代码使元素捕捉到另一个元素：

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

我遇到的问题是，一旦我将一个元素拖离另一个元素，我就会失去捕捉功能。是否有方法延伸确定捕捉到何处的线

例如，假设我们有3个元素，我想在同一垂直轴上对齐所有三个元素。该轴始终位于任何图元的左侧，并随图元一起移动。我是否可以捕捉到元素#1的垂直轴，而不考虑元素#2或#3的垂直位置

[Element#1]||
|               |                  |
|               |                  |
| 可以创建一个特殊的拖曳参照对象作为捕捉轴


$（函数（）{
$（'.drag'）.draggable({
停止：功能（事件、用户界面）{
//删除所有预先存在的拖动参照
$（'.drag reference'）.remove（）；
$（'.drag'）。每个（函数（i，项）{
var$reference=$（“”，{'class'：'drag reference'}）；
变量$elem=$（项目）；
var$container=$elem.parent（）；
变量位置=$elem.position（）；
var left=位置left+‘px’；
$reference.insertBefore（$elem）；
$reference.css({
排名：0，
左:左,，
高度：$container.height（）
});
});
},
包含：'父'，
捕捉：'.拖动引用，.拖动'
});
});

我在.drag reference对象上有一个红色边框，只是为了向您展示它们是如何工作的，但是如果删除该边框，您应该具有您想要的行为，并且没有任何可见的瑕疵来泄露您的技巧。
您可以创建一个特殊的drag reference对象作为捕捉轴


$（函数（）{
$（'.drag'）.draggable({
停止：功能（事件、用户界面）{
//删除所有预先存在的拖动参照
$（'.drag reference'）.remove（）；
$（'.drag'）。每个（函数（i，项）{
var$reference=$（“”，{'class'：'drag reference'}）；
变量$elem=$（项目）；
var$container=$elem.parent（）；
变量位置=$elem.position（）；
var left=位置left+‘px’；
$reference.insertBefore（$elem）；
$reference.css({
排名：0，
左:左,，
高度：$container.height（）
});
});
},
包含：'父'，
捕捉：'.拖动引用，.拖动'
});
});

我在上有一个红色边框。拖动引用对象只是为了向您展示它们是如何工作的，但是如果您删除该边框，您应该会有您想要的行为，没有任何可见的瑕疵来泄露您的技巧。
完美！谢谢你，这正是我想要的。（你非常有用的图表带来了一些重要的荣誉。很好地描述了这个问题。）哈，谢谢！我觉得我无法用语言来描述它，所以我不得不“画”出来。我做了件好事！完美的谢谢你，这正是我想要的。（你非常有用的图表带来了一些重要的荣誉。很好地描述了这个问题。）哈，谢谢！我觉得我无法用语言来描述它，所以我不得不“画”出来。我做了件好事！
[Element #1]    |                  |
|               |                  |
|               |                  |
|<-- Snap to here regardless of "y" location
|               |                  |
|               |                  |
|               [Element #2]       |
|               |                  |
|               |<-- Or to here    |
|               |                  [Element #3]
|               |                  |
|               |                  |<-- Or to here

$(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'
  });
});