Jquery 仅对最外面的元素可拖动吸附

Question

我创建了一个网格，其中每一列都分配了一个数字。我想要一个可拖动的 div 捕捉到每列的边界，然后基本上显示我的 div 捕捉到的最外面列的范围。

例子在这里： https://jsfiddle.net/Cataras/dpdLLcft/

$(function() {
  $(".draggable").draggable({
    snap: ".hour-full, .hour-half",
    snapMode: 'both',
    stop: function(event, ui) {
      /* Get the possible snap targets: */
      var snapped = $(this).data('ui-draggable').snapElements;

      /* Pull out only the snap targets that are "snapping": */
      var snappedTo = $.map(snapped, function(element) {
        return element.snapping ? element.item : null;
      });
      /* Display the results: */
      var result = '';
      $.each(snappedTo, function(idx, item) {
        result += $(item).text() + ", ";
      });

      $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
    }
  });
});

取自这个问题的代码：How to find out about the "snapped to" element for jQuery UI draggable elements on snap

但是，它不仅显示 div 左右两侧的列号，还显示中间的所有列。有时还有右边的下一个，红色条显然甚至没有触及。有什么建议吗？

Answer 1

snappedTo数组有点贪心，我会使用left定位来确定拖动的项目本质上是哪个元素over。

这是一个工作示例：https://jsfiddle.net/Twisty/dpdLLcft/5/

jQuery

$(function() {
  $(".draggable").draggable({
    snap: ".hour-full, .hour-half",
    snapMode: 'both',
    stop: function(event, ui) {
      console.log("Drag stopped at Left: " + ui.offset.left);
      /* Get the possible snap targets: */
      var snapped = $(this).data('ui-draggable').snapElements;
      console.log($(this).data('ui-draggable'));

      /* Pull out only the snap targets that are "snapping": */
      var snappedTo = $.map(snapped, function(element) {
        if (element.snapping) {
          console.log("Found snapped element: " + $(element.item).text() + ". Left: " + element.left + " Width: " + element.width);
          return element;
        }
      });
      /* Display the results: */
      var result = '';
      $.each(snappedTo, function(idx, item) {
        if (ui.offset.left == item.left) {
          console.log(item);
          result = $(item.item).text() + ", ";
          result += $(snappedTo[idx + 3].item).text();
        }
      });

      $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
    }
  });
});

首先，使用你的循环，我只是从 snapping 为 true 的元素中获取所有数据。

其次，我们遍历这些并将可拖动对象的左边缘与各种元素进行比较。我们在控制台中看到：

Drag stopped at Left: 48
Found snapped element. Left: 28 Width: 20
Found snapped element. Left: 48 Width: 20
Found snapped element. Left: 68 Width: 20
Found snapped element. Left: 88 Width: 20
Found snapped element. Left: 108 Width: 20
Found snapped element. Left: 128 Width: 20

然后我们可以比较它并确定我们从哪个元素开始。

if (ui.offset.left == item.left)

当左边偏移量为48，元素左边为48（48 == 48），我们再更新结果：

result = item.item.innerHTML + ", ";
result += snappedTo[idx + 3].item.innerHTML;

因为我们知道可拖动的列数，并且我们知道开始，我们只需通过增加索引从其他元素获取信息。

Snapped to: 2, 5

我认为这就是您试图从您的描述中获得的结果。如果你想得到外面的，简单地调整索引：

result = snappedTo[idx - 1].item.innerHTML + ", ";
result += snappedTo[idx + 4].item.innerHTML;

这应该能以某种方式满足您的需求。如果您有任何问题，请告诉我。

Jquery 仅对最外面的元素可拖动吸附

Jquery draggable snap only to outmost elements

jquery

jquery-ui

draggable

jquery-ui-draggable