Перетаскиваемый элемент JQuery не синхронизируется с курсором при обнаружении зон перетаскивания ⇐ Jquery

[Anonymous]

Я пытаюсь добиться настройки, в которой при перетаскивании элемента div открываются зоны перетаскивания, в которые его можно поместить. Проблема в том, что когда открывается зона перетаскивания над перетаскиваемым началом координат, она смещает элемент div на расстояние его высоты вниз от курсора, что создает странный пользовательский интерфейс.
Приведенный ниже код для репликации – есть подсказки?

Код: Выделить всё

$(document).ready(function() {
$(".goal").draggable({
revert: "invalid",
zIndex: 1000,
refreshPositions: true,
start: function() {
$('.drop_zone').show();
},
stop: function() {
$('.drop_zone').hide();
}
});

$(".drop_zone").droppable({
tolerance: "pointer",
drop: function(event, ui) {
$(this).after(ui.draggable);
}
});
});

Код: Выделить всё

.bucket {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
}

.goal {
border: 1px solid #999;
padding: 5px;
margin-bottom: 5px;
cursor: move;
}

.drop_zone {
display: none;
height: 50px;
border: 2px dotted #999;
margin-bottom: 5px;
}

Код: Выделить всё

Goal 1

Goal 2

Goal 3

Goal 4

Подробнее здесь: https://stackoverflow.com/questions/782 ... e-revealed