Javascript 如何在jquery中选择所有覆盖有可拖动div的div？

我正在构建一个图表，显示一段时间内发生的事件。我的每个事件都是使用

创建的水平条，如下所示：

<div class="aaaa" style="margin-left: 0.00%; width:100.00%;">aaaa</div>
<div class="aaaa" style="margin-left: 5.00%; width: 20.00%;">bbbb</div>
<div class="aaaa" style="margin-left:25.00%; width: 50.00%;">cccc</div>
<div class="aaaa" style="margin-left:55.00%; width: 45.00%;">dddd</div>

我还可以使用以下代码选择所需的条：

$(function () {
    $("#draggable2").draggable({
        axis: "x"
    });
});

$(function () {
    $("#draggable2").resizable({
        helper: "ui-resizable-helper",
        handles: "se, sw, e, w"
    });
});

$(".fake").selectable({
    filter: "div"
});

你可以在下面提到的小提琴上看到，当你做“套索选择”时，我的琴条变成粉红色

然而，我想把我的尺子和这个“套索选择”结合起来，或者换句话说，我希望一旦我的尺子被拖动，下面的所有

都被选中

我用小提琴来说明我的问题：

由于我不熟悉Javascript和Jquery，我非常感谢任何解决方案或建议

谢谢你的时间

编辑帖子答案：

---

基于Jtromans提供的代码，我的最终解决方案如下：

如果我正确理解您的问题，听起来您可以用以下方式解决问题

与标尺交互后，您将能够计算新的宽度、x坐标和y坐标。这非常简单，在与标尺进行任何形式的交互之后，回调中只需要几行jQuery代码

然后，您可以检查（甘特图？）图表中的每个项目，以查看它是否占用标尺所占用的任何相同区域。这将是相对于父容器的

关键在于如何处理标尺是否“在”甘特图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)
});

功能检查覆盖（x、宽度、y、高度）{
$（“.aaaa”）。每个（功能（即，e）{
var thisWidth=$（this）.width（）；
var thishheight=$（this）.height（）；
var offsetTop=$（this.offset（）.top-$（this.parent（）.offset（）.top）；
var offsetLeft=$（this.offset（）.left-$（this.parent（）.offset（）.left）；
log（'x覆盖率：'+offsetLeft+“到”+parseFloat（thiswitch+offsetLeft））；
log（'y覆盖率：'+offsetTop+“到”+parseFloat（thisHeight+offsetTop））；
if（offsetLeft>x&&offsetLefty&&offsetTop

以下是我的解决方案：

$(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"});

---

谢谢你的回答。我理解逻辑，我会朝这个方向走，除非我得到一个更简单的解决方案：-）。回答你的两条评论：1）是的，我的图表是一种甘特图。2） 在我的示例中，resize对div有效，但我不能说它是否对任何元素有效。我刚刚看到了代码的更新，这非常有用，尤其是console.log信息，它允许查看正在发生的事情。我想我现在有足够的材料来处理和实现所有可能的情况（标尺内的横杆，标尺内的左侧或右侧横杆等等）。再次感谢您的帮助。没问题，如果您有Qs，请发回。我现在工作正常。console.log真的很有用。太好了-很高兴它有帮助。感谢这段代码和提琴。作为一个新手，我必须消化所有这些熟悉的东西，并适应它，但我知道去哪里！这是一个小小车-它可以很好地拖动，但不是当你调整尺子的大小。您需要再次开始拖动它，以便它注意到已发生调整大小的操作。

$(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"});