JQuery UI: удалить длинный элемент в месте расположения курсора вместо середины элемента

У меня есть очень длинные перетаскиваемые элементы, которые я могу удалить во всех ячейках фоновой таблицы.

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

К сожалению, середина моего элемента часто не видна, и нецелесообразно отбрасывать элемент в нужном месте.

Можно ли указать позицию курсора для выбора в каком контейнере элемент будет выпадать вместо середины элементов?

Я действительно застрял, и я буду очень признателен за любую помощь.

Привет, вот пример кода, чтобы изобразить мою проблему. Желтый div не может легко попасть в ячейки, потому что он слишком длинный. jsbin.com/upunek/edit

Спасибо

Ответы

$('[id^="cell-"]').each(function(index) {
  $(this).droppable({
  accept: ".cartridge",
  hoverClass: "cell-highlght",
    tolerance: "pointer",
  drop: function( event, ui ) {
    $( this ).addClass( "cell-dropped" );
  }
  });
});