PREGUNTA:

Usando jQuery, ¿cómo puedo imitar a un clic y mantenga pulsado evento?


Actualmente estoy golpeando mi cabeza contra una pared y no se parece a la figura hacia fuera cómo ir sobre esto!

También he intentado buscar en google y en foros, pero fue en vano.

En mi ejemplo, yo estoy usando jQuery UI del .draggable().

Idealmente, me gustaría hacer lo siguiente:

  • Realizar un clic/mousedown en el div.
  • Imitar un clic y mantenga pulsado evento y ser capaz de mover el elemento libremente.
  • En siguiente, haga clic en/mousedown, final, haga clic y mantenga pulsado evento.

Cuando intento funciones como:

$("#drag").draggable().mousedown(function(e){
    e.preventDefault();
    return $(this).mousedown();
});

Entonces se produce un bucle infinito, que finalmente resultará en el navegador estrellarse. Sin embargo, no estoy seguro de cómo uno podría ir sobre la iniciación de una constante .mousedown() evento.

Aquí es una demostración de lo que tengo actualmente: http://jsfiddle.net/vPruR/16/ .

Cualquier ayuda sería muy apreciada!

Usted probablemente tendrá que rodar sus propios draggable función o reescribir el de jQuery UI para trabajar en la alternancia de los clics en lugar de mousedown, como no creo que tratando de forzar a un evento mousedown como el que va a trabajar, pero yo podría estar equivocado ?

OriginalEl autor Dom | 2013-01-21

2 Comentarios

  1. 8

    No creo que hay alguna opción para simular el clic y mantenga pulsado. También puede crear demasiado navegador de dependencia.

    Así que usted podría intentar algo como la siguiente.

    var click = false,
    top = null,
    left = null;
    
    $(document).bind('mousemove', function (e) {
       if (click == true) {
          $('#drag').css({
             left: e.pageX - left,
             top: e.pageY - top
           });
        }
    });
    
    $('#drag').draggable().click(function(e) {
        top = e.pageY - $('#drag').position().top; 
        left = e.pageX - $('#drag').position().left;
        click = !click;
        return false;
    });
    
    $('html').click(function() {
        click = false;
    });

    DEMO: http://jsfiddle.net/dirtyd77/qbcQn/

    +1 para la calidad de la respuesta
    Su solución hecha a la inicial, haga clic en picado desde que se ajusta a la ubicación del ratón. He hecho algunas correcciones y añadidos a tu post. Gracias de nuevo!
    Bienvenido… y feliz codificación… 🙂 también puede desenlazar y obligar a la mosemove evento siempre que sea necesario para hacer más eficiente…
    Buen trabajo de @Dom.. 🙂
    Gracias a usted, señor. Usted simplificado de un problema muy difícil!

    OriginalEl autor Wolf

  2. 5

    Lobo y Dom de soluciones funcionan de maravilla y son la base para mi solución, pero usted ha mencionado que estás usando jquery interfaz de usuario del draggable, así que aquí hay una posible solución con el uso de jquery ui del draggable objeto en conjunción con un droppable. Yo estaba tratando de conseguir el drop de los hechos de fuego cuando un draggable arrastrado por encima de ellos y se dejó caer en ellos, por lo que se utilizó el integrado/funciones privadas de la ui.mouse objeto que draggable hereda y lo que prevalece.

    $(document).ready(function(){
          var click = false
    
        $(document).bind('mousemove', function (e) {
            if (click == true) {
               $('#drag').data('uiDraggable')._mouseDrag(e);
            }
        });
    
        $('#drag').draggable().click(function(e) {
            if(!click){
                $(this).data('uiDraggable')._mouseCapture(e, true)
                $(this).data('uiDraggable')._mouseStart(e, true, true);
            }else{
                $(this).data('uiDraggable')._mouseUp(e);
                $(this).data('uiDraggable')._mouseStop(e);
            }
            click = !click;
            return false;
        });
    
        $('html').click(function() {
            click = false;
        });
    });

    Heres un el violín. Para ver el drop de cosas, simplemente elimine el drop de cosas en el js.

    Nota: esta solución es para la actual versión de jquery ui (1.9.2), pero puede cambiar en futuras versiones, ya que hace uso privado de llamadas.

    OriginalEl autor Todd Bluhm

Dejar respuesta

Please enter your comment!
Please enter your name here