Cómo desencadenar un comportamiento que pueden arrastrarse mediante programación

Question

He creado un "deslizador 2d" en jQuery en el que 2 parámetros se manipulan simultáneamente arrastrando un "mango" dentro de un rectángulo de selección.

he implementado este anidando una "manija" div dentro de un div padre, y usando el plugin jQuery UI para facilitar el comportamiento de arrastre. El HTML se parece a:

<div class="Slider2d" id="grid_spacing_both"> 
    <div class="Slider2dHandle" id="grid_spacing_both_handle"></div> 
</div> 

el jQuery es así:

$(".Slider2dHandle").draggable({ 
    containment: "parent", 
    scroll: false, 
    drag: function(event, ui) { 
     // calculates position and updates value input boxes 
    } 
}); 

También he creado un código que vuelve a colocar el mango a la ubicación de los clics dentro del div padre:

$(".Slider2d").mousedown(function(event){ 
    // get location of click and reposition handle to click location 
}); 

lo que me gustaría hacer es modificar el método anterior de modo que el usuario puede hacer clic en alguna parte en el div padre, han colocado de nuevo el mango a la ubicación clic, y luego comience a arrastrar el mango sin lettin g el botón del mouse hacia arriba. Básicamente, necesito encontrar una manera de activar programáticamente la funcionalidad de arrastre.

He encontrado algunas sugerencias here y here, y trataron de poner en práctica sus recomendaciones al cambiar el método anterior, así:

$(".Slider2d").mousedown(function(event){ 
    // get location of click and reposition handle to click location 
    handle = $(".Slider2d").children(".Slider2dHandle"); 
    handle.trigger(event); 
}); 

Esto funciona en el sentido más técnico, pero su super lento y me da una un montón de mensajes de error de Safari diciéndome "RangeError: se excedió el tamaño máximo de la pila de llamadas". Lo que estoy pensando que está sucediendo es que cuando disparo el evento en el mango, burbujea hasta el padre, que luego llama al gatillo otra vez y así sucesivamente. Intenté detener el burbujeo lanzando un event.stopPropagation en mi código antes y después de la llamada .trigger(), pero fue en vano.

lo tanto, si alguien tiene alguna sugerencia sobre cómo conseguir este trabajo que realmente lo apreciaría. Tengo un plan de respaldo here, pero esto me parece innecesariamente complicado.

Gracias!

Answer 1

Logré que esto funcionara. Como sospechaba, tenía algo que ver con el manejo de eventos.

La solución era simple: he modificado el código anterior para comprobar si el destino del evento fue el mismo que el elemento al que se une la devolución de llamada (es decir, cuadro deslizable delimitador). En el clic inicial que reposiciona el identificador, estos son los mismos elementos. Sin embargo, cuando se desencadena el evento de mousedown del asa y el evento sube hasta el cuadro delimitador, el objetivo de ese evento es el control deslizante. Por lo tanto, no coinciden, y el evento desencadenante no se vuelve a llamar, lo que establece un ciclo infinito.

Al menos creo que eso es lo que está pasando. En cualquier caso, aquí está el código que funcionó:

$(".Slider2d").mousedown(function(event){ 
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle"); 
    if ($(this).attr("id") == $(event.target).attr("id")) { 
     handle.trigger(event); 
    } 
}); 

Answer 2

Esto no funciona para mí, así que supongo que estoy haciendo algo mal. Pero me preguntaba, si funciona para usted, ¿por qué no activado:

if ($(this).attr("id") == $(event.target).attr("id")) 

A esto:

if (this === event.target) 

Voy a actualizar una vez que resolver esto.

Todavía no hay nada: durante ese bucle infinito, el event.target permanece como el control deslizante, no como el control, solo entonces se desencadena el segundo evento.

EDIT: lo tengo, cambié de jQuery 1.7.1 a 1.6.4 y funciona.

Answer 3

O simplemente podría detener la propagación en el evento mousedown del controlador para que no burbujee hasta el evento mousedown del control deslizante.

$(".Slider2d").mousedown(function(event) { 
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle"); 
    handle.trigger(event); 
}); 

$(".Slider2dHandle").mousedown(function(event) { 
    event.stopPropagation(); 
});