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

0

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

  • 0
    Это немного глючит - отлично работает при перетаскивании, но не при изменении размера линейки. Вы должны начать перетаскивать его снова, чтобы он заметил, что изменение размера произошло.
Теги:
jquery-ui-draggable
jquery-ui-selectable

2 ответа

0
Лучший ответ

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

При взаимодействии с линейкой вы сможете вычислить новую ширину, 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)
});
  • 0
    Спасибо за Ваш ответ. Я понимаю логику, и я пойду в этом направлении, если не найду более простое решение :-). Чтобы ответить на два ваших комментария: 1) да, мой график является своего рода диаграммой Ганта. 2) В моем примере изменение размера работает на div, но я не могу сказать, работает ли оно для какого-либо элемента.
  • 0
    Я только что видел обновление вашего кода, это действительно полезно, особенно информация console.log, которая позволяет точно видеть, что происходит. Я думаю, что у меня сейчас достаточно материала, чтобы поиграть и реализовать все возможные варианты (стержень внутри линейки, левая или правая сторона линейки внутри стержня и т. Д.). В очередной раз благодарим за помощь.
Показать ещё 3 комментария
1

Здесь мое решение:

$(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/

  • 0
    Спасибо за этот кусок кода и скрипку. Как новичок, я должен переварить все эти известные вещи и адаптировать их, но я знаю, куда идти!
  • 0
    нет проблем, не забудьте пометить его как ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню