ejemplos dist bootstrap jquery jquery-ui drag-and-drop jquery-ui-draggable

dist - tooltip jquery ui ejemplos



JQuery UI: suelta el elemento largo en la ubicaciĆ³n del cursor en lugar del medio del elemento (2)

Tengo algunos elementos muy largos arrastrables que puedo colocar 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 arrojará 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 atrapado 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


Como lo menciona James Montagne, la tolerancia es lo que necesita para esto. Además de eso, para droppable puedes usar cursorAt. Esto te ayuda a establecer la imagen relativa al cursor (solo es necesario si tu imagen original es más grande que el clon que arrastras)

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


Creo que lo que estás buscando es tolerance . Probablemente sugiero usar "pointer" ya que 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