jQuery droppable - получение событий во время перетаскивания (а не только при первоначальном перетаскивании)

Я использую jQuery droppable (в сочетании с jQuery draggable ), чтобы позволить пользователю добавлять строки в HTML-таблицу, перетаскивая элементы из list и отбрасывает их в таблицу.

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

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

Это достаточно легко вычислить в событии drop , но мне нужно предоставить обратную связь пользовательского интерфейса, когда пользователь перетаскивает (что я бы сделал с помощью двух классов CSS dropable-above и droppable-below , например).

Это кажется невозможным, поскольку событие по срабатывает только один раз; когда пользователь первоначально перетаскивает отбрасываемый элемент.

Можно ли заставить событие over срабатывать при каждом движении мыши, когда пользователь находится над удаляемым элементом?

Если да, то я 'могли бы сделать это:

$("tr.droppable").droppable({
    over: function(event, ui) {
        if (/* mouse is in top half of row */) {
            $(this).addClass("droppable-above").removeClass("droppable-below");
        }
        else {
            $(this).removeClass("droppable-above").addClass("droppable-below");
        }
    },

    out: function(event, ui) {
        $(this).removeClass("droppable-above").removeClass("droppable-below");
    },

    drop: function(event, ui) {
        $(this).removeClass("droppable-above").removeClass("droppable-below");
        if (/* mouse is in top half of row */) {
            // Add new row above the dropped row
        }
        else {
            // Add new row below the dropped row
        }
    }
});

Стили CSS будут примерно такими ...

droppable-above { border-top: solid 3px Blue; }
droppable-below { border-bottom: solid 3px Blue; }

24
задан Kara 10 August 2017 в 00:14
поделиться