Я использую jQuery droppable (в сочетании с jQuery draggable), чтобы позволить пользователю добавлять строки в таблицу HTML, перетаскивая элементы из списка и отбрасывая их в таблице.
Это хорошо работает, однако в настоящее время логика заключается в том, что когда пользователь перетаскивает строку таблицы, новая строка добавляется ниже строки, на которую они опустились.
Было бы лучше, если бы новая позиция добавления строки была основана на том, выпал ли пользователь в верхней или нижней половине существующей строки.
Это достаточно просто вычислить в событии drop, но мне нужно дать обратную связь от пользователя, когда пользователь перетаскивает (что я бы сделал с помощью двух классов CSS droppable-above и droppable-below, например).
Это не представляется возможным, поскольку событие over запускается только один раз; когда пользователь сначала перетаскивает элемент droppable.
Можно ли запустить событие 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; }
