JQuery UI : Drop long element at the cursor locati

问题:

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

回答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

回答2:

As mentioned by James Montagne, tolerance is what you need for this. On top of that, for droppable you can use cursorAt. This helps you set the image relative to the cursor (only needed if your original image is bigger than the clone you dragging)

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