如何在jquery中选择与可拖动div重叠的所有div？
我正在构建一个显示随时间发生的事件的图表。 我的每个事件都是一个使用
创建的水平条，如下所示：
aaaa bbbb cccc dddd
在这张图的顶部，我有一个“标尺”，它是一个可拖动且可resize的
我的目的是水平拖动这个标尺并使用它来选择标尺下方的所有图形条。 选择条形时，背景颜色应该更改。
到目前为止，我设法使用以下代码拖动并调整我的标尺大小：
$(function () { $("#draggable2").draggable({ axis: "x" }); }); $(function () { $("#draggable2").resizable({ helper: "ui-resizable-helper", handles: "se, sw, e, w" }); });
我还设法使用以下代码选择我想要的栏：
$(".fake").selectable({ filter: "div" });
您可以在下面提到的小提琴中看到，当您进行“套索选择”时，我的条形变为粉红色。
但是，我想将我的标尺与这个“套索选择”结合起来，或者换句话说，我希望一旦我的标尺被拖动，下面的所有
都会被选中。
我创造了一个小提琴来说明我的问题： http ： //jsfiddle.net/Lge93/
由于我是Javascript和Jquery的新手，我真的很感激任何解决方案或建议。
谢谢你的时间
编辑post答案：基于Jtromans提供的代码的最终解决方案可在此处获取： http ： //jsfiddle.net/Lge93/5/
如果我正确理解您的问题，听起来您可以通过以下方式解决问题。
与标尺交互后，您将能够计算新的宽度，x和y坐标。 这非常简单，在与标尺进行任何forms的交互之后，回调中只需要几行jQuery代码。
然后，您可以检查（gant？）图表中的每个项目，看它是否占据了标尺所在的任何区域。 这将相对于父容器。
关于标尺是否在Gant图表div项目中，您可以详细了解魔鬼。 下面是一些代码，让您开始研究标尺是否占据与其他div相同的位置：
function checkOverlays (x, width, y, height) { $(".aaaa").each (function (i,e) { var thisWidth = $(this).width(); var thisHeight = $(this).height(); var offsetTop = $(this).offset().top - $(this).parent().offset().top; var offsetLeft = $(this).offset().left - $(this).parent().offset().left; console.log('x coverage: ' + offsetLeft + " to " + parseFloat(thisWidth + offsetLeft)); console.log('y coverage: ' + offsetTop + " to " + parseFloat(thisHeight + offsetTop)); if (offsetLeft > x && offsetLeft < parseFloat(x + width) ) { console.log("I'm in the same x space"); $(this).css('background-color', 'red'); } if (offsetTop > y && offsetTop < parseFloat(y + height) ) { console.log("I'm in the same y space"); $(this).css('background-color', 'red'); } }) } $("#draggable2").on("resize drag", function () { var thisWidth = $(this).width(); var thisHeight = $(this).height(); var offsetTop = $(this).offset().top - $(this).parent().offset().top; var offsetLeft = $(this).offset().left - $(this).parent().offset().left; console.log('x coverage: ' + offsetLeft + " to " + parseFloat(thisWidth + offsetLeft)); console.log('y coverage: ' + offsetTop + " to " + parseFloat(thisHeight + offsetTop)); checkOverlays (offsetLeft, thisWidth, offsetTop, thisHeight) });
这是我的解决方案：
$(function() { $( "#draggable2" ).draggable({ axis: "x", drag: function(e) { var selectableElements = $(".fake").data().uiSelectable.selectees; var ruler = $(e.target); $.each(selectableElements, function(i, v) { if(ruler.offset().left >= $(v).offset().left) { $(v).addClass("ui-selected"); }else { $(v).hasClass("ui-selected") && $(v).removeClass("ui-selected"); } }); } }); }); $(function() { $( "#draggable2" ).resizable({ helper: "ui-resizable-helper", handles: "se, sw, e, w" }); }); $(".fake").selectable({filter:"div"});