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对象上有一个红色边框，只是为了告诉你它们是如何工作的，但是如果你删除那个边框，你应该有你想要的行为，没有可见的工件来放弃你的技巧。

jQuery UI扩展了可拖动的“Snap”行

1 个答案: