JQuery UI: перетащите длинный элемент в позицию курсора вместо середины элемента

Question

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

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

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

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

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

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

Спасибо

Answer 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

Answer 2

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

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