De la interfaz de usuario draggables ( http://jqueryui.com/demos/droppable/#revert ) es posible volver de un div, si dentro de un div y si no dentro de otro? por ejemplo, este

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" });

pero que no funcionan debido a razones obvias.. puedo condición de que aunque?.. para cuando su interior esta lanzables y no en el interior de ese drop?

Son los ‘válido’ y ‘invalid’ divs de alguna manera anidada? Porque de lo contrario, seguramente no podía ser en ambos divs al mismo tiempo… 🙂
imagina una caja grande, y hay pequeñas cajas dentro de ellos. las cajas pequeñas son arrastrables y si los llevo fuera de la caja grande que conseguir volver, si me los llevo a otra pequeña caja también debe obtener revertido – pero esa es la parte que no puedo hacer. He intentado hacer todos los pequeños cuadros de otro drop pero ya que ellos también están dentro de la caja grande, que se registra como válida para no volver se produce. También trató de codiciosos, que no puedo hacer que funcione.
Suponiendo que el revert atributo puede tomar cualquier selector, podrías usar algo como revert: ".outside, .valid > div.invalid" ? Suponiendo que el elemento que envuelve ‘válido’ tiene una clase de outside.
en realidad su verdadero o falso (válido o no), así que supongo que no hay manera de hacer que al igual que. ¿Sabes si hay una forma de evitar excluyendo la pequeña de las cajas de la zona de los grandes de la caja es de la zona y una llamada a la que válida?
Ah, me temo que no… en realidad Nunca utilizado droppables! 🙂

OriginalEl autor Logan | 2011-05-20

1 Comentario

  1. 35

    Su pensamiento era correcto, usted tiene que hacer pequeñas cajas codiciosos droppables y manejar la drop evento sobre ellos. La parte difícil es para cancelar la operación de arrastre.

    Por defecto, su draggables debe empezar revert:'invalid'. Usted no tiene que hacer nada si son arrastrados dentro de la caja grande, que en mi ejemplo se utiliza tolerance:'fit', por lo que el pequeño cajas deben estar completamente adentro de ser aceptado.

    He hecho las cajas pequeñas codiciosos droppables con tolerance:'touch', por lo que si el arrastrado de la pequeña caja de toques otra caja pequeña, va a llamar a la drag controlador.

    Para cancelar la operación de arrastre de arrastre controlador, usted puede hacer una solución de configuración el elemento arrastrado a revert:true, que lo obliga a volver aunque se deja caer en una aceptación de lanzables. Para asegurarse que usted puede arrastrar el cuadro pequeño de nuevo, en su arrastre stop caso de que usted tenga que restablecer revert:'invalid'. El stop evento de incendio en cada gota con éxito y si es la reversión, que se disparará después de revertir ha completado.

    Usted puede probar una demo en vivo aquí: http://jsfiddle.net/htWV3/1/

    HTML:

    <div class="drop">
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
    </div>

    CSS:

    .drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }
    
    .drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; }

    Javascript:

    $('.drop').droppable({
        tolerance: 'fit'
    });
    
    $('.drag').draggable({
        revert: 'invalid',
        stop: function(){
            $(this).draggable('option','revert','invalid');
        }
    });
    
    $('.drag').droppable({
        greedy: true,
        tolerance: 'touch',
        drop: function(event,ui){
            ui.draggable.draggable('option','revert',true);
        }
    });
    Estás preciosa! Muchas gracias!
    Gracias por que. Es posible hacerlo de alguna manera con helper: 'clone' en la que se pueden arrastrar elemento?
    No estoy seguro de cómo usted quiere que funcione, en caso de que desee la posibilidad de arrastrar a romper sólo en el lugar de su clon en una caída, puede agregar una gota de controlador para el principal lanzables contenedor y establecer ui.draggable‘s posición a ui.position, donde fue lanzada. He aquí una demostración: jsfiddle.net/htWV3/231
    Hola lo siento de llevar esta copia de seguridad, pero ¿cómo se puede hacer este trabajo mejor con un diseño de cuadrícula? por ejemplo, mi draggable se ajusta a grid: [ 60, 60 ] pero cuando vuelve después de que se cayó no volver a la posición de la cuadrícula es siempre apagado un poco.
    primero de todo muchas gracias. he aprendido mucho de su respuesta, la cual estaba ligada a partir de una pregunta diferente donde la aceptan respuesta fue utilizar otro plugin. voy a añadir que cuando se utiliza una cuadrícula me parece funcionado mejor para mí, para establecer el tolerance de la greedy lanzables a fit. de lo contrario, no me dejaba caer en la cuadrícula de puntos que tocó el codicioso lanzables.

    OriginalEl autor DarthJDG

Dejar respuesta

Please enter your comment!
Please enter your name here