jQuery se puede arrastrar y pasar el ratón

Question

tengo actualmente algunos menús desplegables que abren el ratón por encima. Estoy implementando algunas funciones de arrastrar y soltar usando arrastrar y soltar desde jquery ui. Parece que los eventos mouseover para los menús no se disparan al arrastrar, ¿hay alguna manera de permitirles trabajar?

vez implementado de la siguiente manera (simplificado):

$('#some_id').draggable({ helper: 'clone', opacity: 0.35, zIndex: 20000, cursor: 'move' }); 
$('#some_menu').live('mouseenter click', function(){jThis.find('div').addClass('opened');}); 

Answer 1

simplemente descubrí que este es un problema muy lógico. Una vez que empiezas a arrastrar el elemento, se queda debajo del puntero del mouse ... por lo tanto, ¡se mantendrá sobre el elemento actual todo el tiempo!

A (no tan bonita) solución es establecer la opción cursorAt manera que el puntero del ratón se encuentra fuera del elemento arrastrable:

$('#some_id').draggable({ 
     cursorAt: {left: -10, top: -10} 
}); 

Sería mucho mejor si hay una manera de pasar de alguna manera el ratón puntero debajo del elemento que está siendo arrastrado, pero hasta ahora no he encontrado una solución para eso.

Espero que esto ayude un poco!

Answer 2

puede escribir un controlador de eventos para su arrastre arrastrable que comprueba si el cursor está sobre el elemento para el que desea para controlar el evento mouseover. Usted tendría que detectar el ratón encima por sí mismo utilizando métodos jQuery compensados ​​(), ancho() y la altura() para el elemento estático y, o bien la posición del cursor del objeto de evento para el evento de arrastre o el propio ui.offset de jQuery UI, lo que se ajusta mejor a su propósito .

Otra opción, menos elegante pero probablemente más fácil de implementar, sería hacer que su elemento estático sea desplegable, en cuyo caso jQuery UI le permite manejar un evento cuando un elemento arrastrable se cierne sobre él. Luego puede evitar la caída si no quiere permitirlo.

Answer 3

Esto se puede lograr mediante el uso de "sobre" y "fuera", donde se define su lanzables.

$(".droppable").droppable({ 
    accept: '.draggable', 
    over: function(event, ui) { 
     $(this).addClass('temporaryhighlight'); 
    }, 
    out: function(event, ui) { 
     $(this).removeClass('temporaryhighlight'); 
    },  
    drop: function() { 
     //do some stuff 
    } 
}); 

En su escenario, sin embargo, habría que hacer sus menús lanzables, que supongo no es exactamente lo que quiere (estoy asumiendo que usted está tratando de bajar a algo que está en el menú, no todo el menú desplegable). Tal vez simplemente no hacer nada o revertir por la caída: ¿funciona en esos artículos ...?

Créditos y más información:

http://forum.jquery.com/topic/draggable-highlighting-custom-div-on-droppable-hover

http://jsfiddle.net/nickadeemus2002/wWbUF/1/

Answer 4

Como Marcel Paans indicados el problema es que los palos de ayuda bajo el cursor del ratón.

La solución es establecer la propiedad CSS pointer-events en none en el elemento auxiliar. Al hacer esto, los eventos de puntero se activarán en los elementos debajo del helper.

Esto se puede hacer fácilmente mediante el suministro de la opción de ayuda con una devolución de llamada para generar el elemento de ayuda:

$('#some_id').draggable({ 
    helper: function() { 
     return $(this).clone().css("pointer-events","none").appendTo("body").show(); 
    } 
}); 

Answer 5

Sobre la base de lo que Yonatan colocado:

Sus JS:

$('#some_id').draggable({ 
    helper: 'clone', 
    opacity: 0.35, 
    zIndex: 20000, 
    cursor: 'move' 
}); 

Sólo tiene que añadir esto a tu CSS:

#some_id.ui-draggable-dragging { 
    pointer-events: none; 
} 

es un poco más limpio.