Utilizando jQuery se pueden arrastrar

De cómo restringir la posibilidad de arrastrar a ser arrastrado sólo en una dirección ?
yo.e o sólo la parte superior o sólo parte inferior cuando axis: 'y'
y, o bien sólo a la izquierda o correcta sólo cuando axis: 'x'

Esto significa que si quiero un draggable (with axis set to 'y') a ser arrastrado sólo a bottom, entonces no debería ser capaz de arrastrar a la parte superior me.e debe permanecer en su lugar cuando trató de arrastrar hacia arriba

Esto es lo que he intentado, pero no funciona, me.e draggable todavía arrastra en dirección hacia arriba

$('. draggable').draggable({
    axis: 'y',
    handle: '.top'
    drag: function( event, ui ) {
       var distance = ui.originalPosition.top - ui.position.top;

       //if dragged towards top
       if (distance > 0) { 
           //then set it to its initial state
           $('.draggable').css({top: ui.originalPosition.top + 'px'});
       }
   }
});
Ha figurado esto todavía? Estoy tratando de hacer algo similar, jsFiddle
Te falta el «yo» de la India en tu perfil 🙂

OriginalEl autor Uttara | 2013-03-25

2 Comentarios

  1. 6

    Responder a mi propia pregunta (otra alternativa además de la respuesta anterior), así como para ayudar a otros

    Tomando un caso concreto decir permite arrastrar sólo hacia abajo cuando el eje:’y’

    <div class="draggable">draggable only downwards</div>
    

    css

    .draggable {
        position:absolute;
        top:0px;
        background:pink;
        height:100px;
        width:100%;
        left: 0px;
        text-align:center;
    }
    

    script

    $('.draggable').draggable({
        axis: "y"
    });    
    
    $('.draggable').on('mousedown', function() {
        var x1 = x2 = $(".draggable").position().left;
        var y1 = $(".draggable").position().top;
        var y2 = ($(window).height() + $(".draggable").position().top);
        $(".draggable").draggable('option', 'containment', [x1, y1, x2, y2]);
    });
    

    Demo Enlace

    Sólo una pequeña sugerencia: puede utilizar $(this) en lugar de la repetición de $(‘.la posibilidad de arrastrar’), o almacenar el objeto en una variable. Gracias Uttara.

    OriginalEl autor Uttara

  2. 2

    Método 1 – con Volver Hack

    jsFiddle

     $('.draggable').draggable({
         axis: "y",
         start: function (event, ui) {
             start = ui.position.top;
         },
         stop: function (event, ui) {
             stop = ui.position.top;
    
             if (start > stop) {
                 $('.draggable').css({top: ui.originalPosition.top + 'px'});
             }
         }
     });
    

    Método 2: Desactivar arrastrar sin volver

    jsFiddle 2

    Básicamente el Método 2 sólo restringe la posibilidad de arrastrar el elemento en un contenedor y se mueve el recipiente con la posibilidad de arrastrar elemento. Tiene una mirada, de Su sorprendentemente simple, pero eficaz.

    $('.draggable').draggable({
        axis: "y",
        containment: "#containment-wrapper",
        scroll: true,
        scrollSensitivity: 100,
        scrollSpeed: 25,
        cursor: '-moz-grabbing'
    });
    $('.draggable').mousemove(function () {
        var x = $('.draggable').css('top');
        $("#containment-wrapper").css({
            top: x
        });
    });
    

    Método 3
    Mismo efecto que el Método 2, simplemente utilizando la función de arrastre.

    jsFiddle 3

    $('.draggableDown').draggable({
        axis: "y",
        containment: "#containment-wrapperDown",
        scroll: true,
        scrollSensitivity: 100,
        scrollSpeed: 25,
        cursor: '-moz-grabbing',
        drag: function () {
            var x = $('.draggableDown').position().top;
            $("#containment-wrapperDown").css({
                top: x
            });
        }
    });
    
    U shudn no ser capaz de arrastrar. Lo que te han hecho se pueden lograr mediante la adición de «volver:true’
    Todavía estoy trabajando en ello, revert:true no funciona en mi caso, la posibilidad de arrastrar el elemento estaba siendo revertidas en el borde de la pantalla.
    la adición de revert:true condicionalmente parece ser problemático-jsFiddle
    Creo que por fin tengo una solución sólida, échale un vistazo.
    Gracias por tu esfuerzo :). Ya han encontrado una solución a largo de la espalda pero no llegué a tiempo a publicar como una respuesta.

    OriginalEl autor apaul

Dejar respuesta

Please enter your comment!
Please enter your name here