IU de JQuery: soltar el elemento largo en la ubicación del cursor en lugar de la mitad del elemento

Question

Tengo algunos elementos muy largos que puedo arrastrar en todas las celdas de una tabla de fondo.

Cuando empiezo a arrastrar este tipo de elemento sobre mis contenedores desplegables (las celdas de mi tabla), el punto "caliente" para saber dónde se colocará el elemento es el medio de sí mismo.

Desafortunadamente, el medio de mi elemento a menudo no es visible y no es útil soltar el elemento en el lugar correcto.

¿Es posible especificar la posición del cursor para elegir en qué contenedor se colocará el elemento en lugar de la mitad de los elementos?

Estoy realmente atorado y realmente agradeceré cualquier ayuda.

Hola, aquí hay un código de muestra para representar mi problema. El div amarillo no puede caer fácilmente en las celdas porque es demasiado largo. jsbin.com/upunek/edit

Gracias

Answer 1

creo que lo que estás buscando es tolerance. Probablemente sugeriría usar "pointer" ya que esto usará el cursor del mouse como su punto de "superposición".

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

Como se ha mencionado por James Montagne, la tolerancia es lo que necesita para esto. Además de eso, para droppable puedes usar cursorAt. Esto le ayuda a configurar la imagen en relación con el cursor (sólo necesario si la imagen original es más grande que el clon que arrastra)

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