Question

I have some very long draggable elements that I can drop in all cells of a background table.

When I start dragging this kind of element hover my droppable containers (the cells of my table), the “hot” point to know where the element will be dropped is the middle of itself.

Unfortunately, the middle of my element is often not visible and it is not useful to drop the element in the right place.

Is it possible to specify the cursor position to choose in which container the element will be drop instead the middle of the elements?

I am really stuck and I will really appreciate any help.

Hi, here is a sample code to depict my problem. The yellow div cannot easily drop into the cells because it is too long. jsbin.com/upunek/edit

Thanks

Answer 1

I think what you’re looking for is tolerance. I would probably suggest using "pointer" as this will use the mouse cursor as your “overlap” point.

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