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));
}
});
});

代码取自这个问题：如何找到关于"；捕捉到"；用于jQuery UI的元素可在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;

这应该会以某种方式得到你想要的。如果你有问题，请告诉我。