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的元素中的所有数据。

其次，我们遍历这些并将我们的draggable的左边缘与各种元素进行比较。我们在控制台中看到了这一点：

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;

由于我们知道draggable覆盖的列数，并且我们知道开始，所以我们只是通过增加索引从其他元素获取信息。

Snapped to: 2, 5

我认为这是你想要从你的描述中完成的。如果你想获得外部的，只需调整索引：

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

这应该让你想要这样或那样的方式。如果您有疑问，请告诉我。

Jquery draggable snap仅限于最外层的元素

1 个答案: