Как выбрать все div, которые накладываются с перетаскиваемым div в jquery?

Я строю график, отображающий события, происходящие со временем. Каждое мое событие - это горизонтальная полоса, созданная с использованием <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>

Вверху этого графика у меня есть "линейка", которая является перетаскиваемой и изменяемой размера <div>

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

Мое намерение состоит в том, чтобы перетащить эту линейку по горизонтали и использовать ее, чтобы выбрать все столбцы моих графиков, которые находятся ниже линейки. Когда бары выбраны, цвет фона должен измениться.

Пока мне удается перетащить и изменить размеры моей линейки, как я хочу, с помощью следующего кода:

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

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

Мне также удается выбрать бары, которые я хочу, используя следующий код:

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

Вы можете видеть на скрипке, на которую ссылаются ниже, что, когда вы делаете "выбор лассо", мои столбики становятся розовыми.

Тем не менее, я хотел бы объединить мою линейку с этим "выбором лассо", или, другими словами, я хотел бы, чтобы, как только моя линейка была перетащена, все <div> ниже будут выбраны.

Я создал скрипку, чтобы проиллюстрировать мою проблему: http://jsfiddle.net/Lge93/

Поскольку я новичок в Javascript и Jquery, я был бы очень признателен за любое решение или предложение.

Спасибо за ваше время

Редактировать пост ответы: мое окончательное решение на основе кода, предоставленного Jtromans, доступно здесь: http://jsfiddle.net/Lge93/5/

Источник

2 ответа

Решение

Если я правильно понимаю ваш вопрос, похоже, вы могли бы решить проблему следующим образом.

Взаимодействуя с линейкой, вы сможете рассчитать новую ширину, x- и y-координаты. Это довольно просто и требует всего нескольких строк кода jQuery в обратном вызове после любой формы взаимодействия с вашей линейкой.

Затем вы можете проверить каждый элемент в вашей диаграмме (gant?), Чтобы увидеть, занимает ли он какую-либо из тех же областей, что и линейка. Это будет относительно родительского контейнера.

Дьявол подробно описывает, как бы вы хотели управлять тем, находится ли линейка в элементе диаграммы Ганта. И ниже приведен код, позволяющий вам начать работу над тем, занимает ли Линия то же место, что и другие элементы 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"});

http://jsfiddle.net/Lge93/3/

Источник
Другие вопросы по тегам