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

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

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

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

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

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

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

Спасибо


drag-and-drop jquery jquery-ui jquery-ui-draggable
person sdespont    schedule 10.02.2012    source источник
comment
Можете ли вы опубликовать свой текущий код?   -  person James Montagne    schedule 10.02.2012
comment
Привет, вот пример кода, изображающий мою проблему. Желтый div не может легко попасть в ячейки, потому что он слишком длинный. jsbin.com/upunek/edit   -  person sdespont    schedule 10.02.2012

Ответы (2)


arrow_upward
57
arrow_downward

Я думаю, что вы ищете 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

person James Montagne    schedule 10.02.2012
comment
СПАСИБО! Это именно то, что я искал! Я долго искал все перетаскиваемые варианты, но не выпадающие... Это делает мой день ^_^ - person sdespont; 10.02.2012

arrow_upward
0
arrow_downward

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

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

person Pieter Venter    schedule 22.07.2014