События мыши jQuery на нижележащих объектах при перетаскивании изображения

Question

Я пытаюсь реализовать простое перетаскивание изображений между панелями с помощью jQuery. При перетаскивании я создаю миниатюру изображения, которую я размещаю под мышью. Эта часть все работает, но так как мышь теперь всегда имеет миниатюру под ней, я не получаю указатель мыши / оставление на базовых панелях перетаскивания. Я надеялся использовать эти события для выделения целевой панели при перетаскивании.

Можно ли сделать так, чтобы миниатюра не скрывала эти события? Что еще я мог попытаться заставить это работать?

(Я не хочу использовать jQueryUI в этом случае, потому что он мне не нужен ни для чего другого, и это кажется излишним. Кроме того, это немного упражнение для обучения, поэтому я хочу понять варианты:).

Answer 1

Один из вариантов - отслеживать движение мыши по документу и проверять, находится ли курсор в пределах каких-либо элементов, которые вас интересуют на вашей странице. вы не получите события мыши для отдельных элементов, но вы можете вручную отследить последний элемент, который была передана мышью, и определить, что с ним делать, если при использовании отпускается кнопка мыши (мышь вверх по документу).

примерно как

var last_element = null;

function document_mousemove (e) {

    last_element = null;

    for each el in array_of_important_elements {

        if ( mouse position in el bounds ) {
            last_element = el;
        }
    }
}

function document_mouseup (e) {
    if (last_element != null) {
        // do your drop logic here
    }
}

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

Answer 2

Не могли бы вы расположить миниатюру смещенной от мыши, а не под ней? Таким образом, это не заслоняет события вашей мыши. Или вы можете получить этот элемент и проверить, когда он входит в границы другого элемента?