如何在jquery中选择与draggable div重叠的所有div？ [英] How to select all divs that overlay with a draggable div in jquery?

问题描述

我正在构建一个图表，显示随时间发生的事件。我的每个活动都是使用< div> 创建的水平条，如下所示：

I'm building a graph displaying events happening over time. Each of my event is an horizontal bar that is created using a <div> as shown below:

<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>

在此图表的顶部，我有一个标尺，它是一个可拖动且可调整大小的< div>

At the top of this graph, I have a "ruler" which is a draggable and resizable <div>

<div id="draggable2" class="draggable ui-widget-content">
    <p>Ruler</p>
</div>

我的目的是水平拖动这个标尺并使用它来选择我的图形的所有条形在统治者下面。当选择条形时，背景颜色应该改变。

My intention is to drag this ruler horizontally and to use it to select all bars of my graphs that are below the ruler. When bars are selected, the background color should change.

到目前为止，我设法使用以下代码拖动并调整我的标尺大小：

So far I manage to drag and to resize my ruler as I want with the following code:

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

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

我还设法使用以下代码选择我想要的栏：

I also manage to select the bars I want using the following code:

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

你可以在下面提到的小提琴上看到，当你选择套索时，我的酒吧就变成了粉红色。

You can see on the fiddle referenced below that when you do a "lasso selection", my bars become pink.

但是，我想把我的标尺与这个套索选择结合起来，或者换句话说，我希望一旦我的标尺被拖动，所有<下面的code>< div> 被选中。

However, I would like to combine my ruler with this "lasso selection", or in other words, I would like that once my ruler is dragged, all <div> that are below become selected.

我创造了一个小提琴来说明我的问题： http://jsfiddle.net/Lge93/

I've created a fiddle to illustrate my problem: http://jsfiddle.net/Lge93/

As我是Javascript和Jquery的新手，我真的很感激任何解决方案或建议。

As I'm new to Javascript and Jquery, I would really appreciate any solution or suggestion.

感谢您的时间

编辑帖子答案：
我的最终解决方案基于提供的代码由Jtromans提供： http://jsfiddle.net/Lge93/5/

推荐答案

如果我理解你的问题，听起来你可以通过以下方式解决问题。

If I understand your question correctly, it sounds like you could solve the problem in the following way.

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

Upon interacting with the ruler, you will be able to calculate the new width, x- and y-coordinates. This is pretty straight forward and requires only a few lines of jQuery code in the callback after any form of interaction with your ruler.

然后你可以检查你的每个项目（gant？）图表看它是否占据统治者所在的任何区域。这将是相对于父容器的。

You could then check for each item in your (gant?) chart to see whether it occupies any of the same area that the ruler does. This would be relative to the parent container.

关于标尺是否在Gant图表div项目中，您需要处理的详细信息。以下是一些代码，让您开始计算标尺是否占据与其他div相同的位置：

The devil is in the detail for how you would like to handle whether the ruler is 'in' the Gant chart div item. And below is some code to get your started on working out whether the Ruler occupies the some of the same location as the other divs:

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

这篇关于如何在jquery中选择与draggable div重叠的所有div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！