Me gustaría conseguir la facilidad efecto con Jquery se pueden arrastrar. Pero no encontré la opción en este plugin. Así que me preguntaba si hay otros plugins que tienen esta opción – o una solución fácil.

El efecto estoy tratando de lograr es algo que este: http://www.fileden.com/files/2009/6/4/2466215/dragease.swf

Como se puede ver, al arrastrar, la imagen en movimiento se siente mucho más suave debido a la relajación. También me gustaría restricción de la arrastra a uno de los ejes, también necesitamos hacer es volver a su lugar. JQuery se pueden arrastrar tiene estas dos últimas opciones, así que eso es bueno.

El código de ejemplo ya me da lo que yo quiero (excepto la flexibilización): http://jsfiddle.net/dandoen/NJwER/1/

Algún consejo se agradece.

Saludos,
Dandoen

OriginalEl autor dandoen | 2011-06-18

3 Comentarios

  1. 23

    Puede utilizar el original arrastrarse, pero se necesita un par de líneas de código extra. Vamos a crear una invisible ayudante y manualmente animar el objeto original a seguir con la aceleración personalizada. Usted puede jugar con la animación duración y la la flexibilización de la función para personalizar el efecto.

    En caso de que usted utilice cualquier draggables, deben ser correctamente se activa cuando el ratón pasa por encima de ellos sin tener que esperar para que el objeto de llegar allí.

    El único inconveniente es que como estamos cambiando el elemento original de la posición manualmente, el revertir el parámetro que no puede ser utilizado, pero puede ser fácilmente resuelto por el ahorro de la posición de partida y la animación del objeto al arrastrar se detiene.

    HTML:

    <div id="draggable" class="ui-widget-content">
        <p>Revert the original</p>
    </div>

    CSS:

    #draggable {
        position: relative;
        width: 100px;
        height: 100px;
        padding: 0.5em;
        float: left;
        margin: 0 10px 10px 0;
        background-color: red;
        border: 2px solid gray;
    }

    Javascript:

    $(function() {
        $("#draggable").draggable({
            //Can't use revert, as we animate the original object
            //revert: true,
    
            axis: "y",
            helper: function(){
                //Create an invisible div as the helper. It will move and
                //follow the cursor as usual.
                return $('<div></div>').css('opacity',0);
            },
            create: function(){
                //When the draggable is created, save its starting
                //position into a data attribute, so we know where we
                //need to revert to.
                var $this = $(this);
                $this.data('starttop',$this.position().top);
            },
            stop: function(){
                //When dragging stops, revert the draggable to its
                //original starting position.
                var $this = $(this);
                $this.stop().animate({
                    top: $this.data('starttop')
                },1000,'easeOutCirc');
            },
            drag: function(event, ui){
                //During dragging, animate the original object to
                //follow the invisible helper with custom easing.
                $(this).stop().animate({
                    top: ui.helper.position().top
                },1000,'easeOutCirc');
            }
        });
    });

    Demo: http://jsfiddle.net/NJwER/4/

    Actualización: Limitado del eje que se pueden arrastrar

    Conforme a lo solicitado, aquí está el código modificado de este hilo. El original es brianpeiris’ brillante eje restringido draggables extensión.

    Cambio fue muy simple, solo se agrega el sobre de bits para el código y el hecho de revertir opcional. Yo le cambió el nombre a draggableXYE (E para facilitar que es). Podría no ser la solución más elegante, probablemente sería fácil escribir es como una pequeña extensión de la draggableXY, pero va a hacer el trabajo.

    Arrastrando siente muy interesante cuando el interruptor de modo dinámico, que facilita el movimiento en el momento en el que se pueden arrastrar el encaje de un eje a otro.

    Javascript:

    $.fn.draggableXYE = function(options) {
    var defaultOptions = {
    distance: 5,
    dynamic: false
    };
    options = $.extend(defaultOptions, options);
    //ADDED: Store startPosition for reverting
    var startPosition = this.position();
    //ADDED: Function to apply easing to passed element
    function AnimateElement(element, newpos) {
    $(element).stop().animate({
    top: newpos.top,
    left: newpos.left
    }, 1000, 'easeOutCirc');
    }
    this.draggable({
    distance: options.distance,
    //ADDED: Helper function to create invisible helper
    helper: function(){
    return $('<div></div>').css('opacity',0);
    },
    start: function(event, ui) {
    ui.helper.data('draggableXY.originalPosition', ui.position || {
    top: 0,
    left: 0
    });
    ui.helper.data('draggableXY.newDrag', true);
    },
    drag: function(event, ui) {
    var originalPosition = ui.helper.data('draggableXY.originalPosition');
    var deltaX = Math.abs(originalPosition.left - ui.position.left);
    var deltaY = Math.abs(originalPosition.top - ui.position.top);
    var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag');
    ui.helper.data('draggableXY.newDrag', false);
    var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax');
    ui.helper.data('draggableXY.xMax', xMax);
    var newPosition = ui.position;
    if (xMax) {
    newPosition.top = originalPosition.top;
    }
    if (!xMax) {
    newPosition.left = originalPosition.left;
    }
    //ADDED: Animate original object with easing to new position
    AnimateElement(this, newPosition);
    return newPosition;
    },
    //ADDED: Stop event to support reverting
    stop: function() {
    if (options.revert) {
    AnimateElement(this, startPosition);
    }
    }
    });
    };

    Uso:

    $('.drag').draggableXYE({
    revert: true,
    dynamic: true
    });

    DEMO: http://jsfiddle.net/4C9p2/

    muchas gracias! pequeña pregunta, ¿alguna idea de cómo puedo implementar brianpeiris del código link con el fin de hacer que sea posible para permitir que el usuario arrastre tanto horizontal como verticalmente, pero sólo en uno de los ejes en el tiempo.
    He añadido la versión modificada de brianpeiris’ extensión con la flexibilización y opcional revertir. Disfrutar.
    impresionante!! gracias compañero, ojalá pudiera upvote aún más jaja
    Muy bien hecho DarthJDG! Tiene un upvote.
    ¿Cómo se puede añadir la misma funcionalidad tanto para los eventos de ratón y eventos de toque (cuando en una tablet o dispositivo móvil)??

    OriginalEl autor DarthJDG

  2. 7

    He visto un buen número de preguntas acerca de arrastre de flexibilización/impulso. Finalmente me llegó a hacer un plugin de mi solución. Pruébalo aquí:

    http://jsfiddle.net/mattsahr/bKs7w/

    Uso básico es sencillo.

     
    $('.dragme').draggable().dragMomentum(); 
    

    Se contenedoras de algunos trabajos anteriores de esta pregunta.

    Notas —
    CONTENCIÓN — .dragMomentum funciona bastante bien con la «contención» de la opción, reemplaza el comportamiento normal con un agradable complemento de la acción cuando la deja ir. Y lo hace el mismo complemento de vuelta desde el borde con la ventana del navegador si no hay contenedor div.

    COMPATIBILIEY — funciona en ie9, chrome12, firefox5. Más allá de eso, no lo sé.

    Se ve muy bien. Cómo acerca de las licencias de este bajo MIT o una licencia similar?
    Licencia MIT. hecho. jsfiddle.net/mattsahr/bKs7w

    OriginalEl autor mattsahr

  3. 7

    No creo que arrastrarse tiene una opción para eso. Usted puede necesitar para rodar su propio. Si usted elige, usted puede querer hacer algo como esto:

    http://jsfiddle.net/NJwER/2/

    esto es realmente difícil (pero era una especie de interesante). Usted probablemente desea hacer la animación duración dinámica basada en qué medida el elemento fue de su cursor y el uso de una variedad distinta de la predeterminada.

    $(function() {
    var dragging = false;
    var dragger, offsetX, offsetY;
    $("#draggable").mousedown(function(e) {
    dragging = true;
    dragger = this;
    offsetX=e.offsetX;
    offsetY=e.offsetY;
    });
    $("body").mouseup(function(e) {
    dragging = false;
    }).mousemove(function(e) {
    if (dragging) {
    $(dragger).stop().animate({left:e.pageX-offsetX, top:e.pageY-offsetY},300);
    console.log(e.pageX+" "+e.pageY);
    }
    });
    });​
    Yo no la base de que el tiempo en la distancia, particularmente si se usa uno de los velocidadfinal funciones.
    muchas gracias por tu esfuerzo amigo!

    OriginalEl autor James Montagne

Dejar respuesta

Please enter your comment!
Please enter your name here