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

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

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

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

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

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

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

Спасибо

Ответ 1

Я думаю, что вы ищете tolerance. Я бы предположил использовать "pointer", так как это будет использовать курсор мыши как вашу точку перекрытия.

http://jqueryui.com/demos/droppable/

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

http://jsbin.com/upunek/2/edit

Ответ 2

Как упоминал Джеймс Монтань, терпимость - это то, что вам нужно для этого. Кроме того, для droppable вы можете использовать cursorAt. Это поможет вам установить изображение относительно курсора (требуется только в том случае, если исходное изображение больше, чем перетаскиваемый клон)

http://api.jqueryui.com/draggable/#option-cursorAt