jQuery UI 扩展可拖动的“Snap”线

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-reference 对象上有一个红色边框，只是为了向您展示它们是如何工作的，但是如果您移除该边框，您应该拥有您想要的行为，并且没有可见的伪影来泄露您的技巧。