Обнаружить несколько элементов под перетаскиваемым объектом? Javascript / Jquery - PullRequest
Новая
       29

Обнаружить несколько элементов под перетаскиваемым объектом? Javascript / Jquery

3 голосов
/ 01 марта 2011

У меня есть кнопка, которая динамически создает объект и делает его «перетаскиваемым» со следующим кодом, используя jquery: 

createNewDiv(divId); <--local function that creates a new div with id=divId
$("#"+divId).draggable();

, что делает элемент с элементом Id = divId перетаскиваемым (благодаря jquery libs)Таким образом, любой вновь созданный элемент можно перетащить в любое место на странице

Теперь предположим, что я создаю элементы A, B и C, все из которых можно перетаскивать, и перетаскиваю n 'drop один над другим (поэтомуC остается «над» B, а B остается «над» A, точно так же, как листы бумаги, сложенные друг над другом)

Есть ли способ определить, какие элементы находятся под каждым из них?Например, при наведении курсора на C он возвращает «элемент B и элемент A находятся ниже…» (оба), или при наведении курсора B он возвращает «элемент A ниже»?

исследовал несколько методов, таких как elementFromPoint () или метод .droppable () из jquery, но я не могу вернуть --multiple elements-- ниже любых других (например, C, чтобы вернуть и A, и B под ним)

Другой способ, который я мог бы представить с помощью этого кода, - переопределить .droppable () и вызвать его рекурсивно, но в настоящее время я не понимаю, как это сделать.Например, когда:

a) Отбрасывание A, ничего не отображается (под ним нет элементов)

b) Отбрасывание B над A - отображается «B на {A}»

c) Отбрасывание C над B - "C на {B, A}" (C находит B, а B находит A)

jQuery или нативный Javascript будет очень полезен

1 Ответ

1 голос
/ 03 марта 2011

Я думаю, что лучший способ сделать это - сделать что-то вроде: 

var bufferInteger = 0, dragParent = $( container ), dragChildren = {};
(function layerCalculation(){
    dragParent.find('.draggable').each(function(index, val){
        var child = $(val), 
          childOffset = {
            top    : child.offset().top,
            left   : child.offset().left,
            width  : child.width(),
            zIndex : child.css('z-index')
          };
        dragChildren[child.attr('id')].top = childOffset.top;
        dragChildren[child.attr('id')].left = childOffset.left;
        dragChildren[child.attr('id')].width = childOffset.width;
        dragChildren[child.attr('id')].zIndex = childOffset.zIndex;
    });
}());

function detectHover(ui){
    var currentlyOver,
        uiElement = ui.helper[0],
        underStacked = dragChildren, 
        draggedItem = {
        id     : uiElement.id,
        offset : {
            left : uiElement.offsetLeft,
            top  : uiElement.offsetTop
        }
    };
    underStacked.splice(understacked.indexOf(draggedItem.id), 1);

    for (var i in underStacked){
        if ((underStacked[i].left <= draggedItem.offsetLeft <= (underStacked[i].left - - underStacked[i].width)) {
            currentlyOver = underStacked.id;
        } else if (...) {
            // do some logic here to calculate draggedItem.offsetLeft + draggedItem.width
        }
    }
    if (typeof currentlyOver !== 'undefined'){
        return currentlyOver;
    } else {
        return false;
    }
}
$('.draggable').bind({
    dragstart : function(){
        layerCalculation();
    },
    dragend : function(){
        layerCalculation();
    },
    drag : function(event, ui){
        bufferInteger++;
        if (bufferInteger > 9){
            bufferInteger = 0;
            detectHover(ui);
            ...
            // do something with return ID here.
        }
    }
});
...