Tengo un elemento que es la posibilidad de arrastrar y un elemento que es lanzables. Una vez que el elemento arrastrado se deja caer sobre la dropzone estoy tratando de ejecutar el siguiente jquery pseudo código:

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

donde el revert() función mueve el elemento arrastrado de nuevo a su posición original.

¿Cómo se podía lograr esto?

P. S. soy consciente de la posibilidad de arrastrar ‘revert’ opción, sin embargo, esto sólo se activa si el elemento arrastrado no hacen a la dropzone.

InformationsquelleAutor Ash | 2010-06-21

5 Comentarios

  1. 75

    Hay algunas opciones integradas para ello, en su .draggable(), establecer el volver opción a 'invalid', y va a volver si no era correctamente colocados en un drop, como este:

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

    A continuación, en su .drop() conjunto de lo que es válido para una gota de usar el aceptar opción, por ejemplo:

    $("#droppable").droppable({ accept: '#draggable' });​

    Nada que no coincida con este selector se restablece cuando dejas ir, usted puede ver una demostración completa aquí. La opción de aceptar también tiene una función si usted necesita el filtrado de un selector no puede proporcionar, como este:

    $("#droppable").droppable({ 
      accept: function(dropElem) {
        //dropElem was the dropped element, return true or false to accept/refuse it
      }
    });​
    • +1 gran ayuda! Gracias!
    • Craver, puede que os invito a echar un vistazo a una de jQuery se pueden arrastrar y lanzables relacionados con la pregunta aquí : stackoverflow.com/questions/54498364/… ?
  2. 8

    Tuve un caso de uso donde tuve que correr un poco de lógica en el drop del método de la gota para determinar si la posibilidad de arrastrar debería volver. He utilizado el siguiente para lograrlo:

    JS:

    $('.draggable-elements').draggable({
      revert: function() {
        if ($(this).hasClass('drag-revert')) {
          $(this).removeClass('drag-revert');
          return true;
        }
      }
    });
    
    $('.droppable-elements').droppable({
      drop: function(event, ui) {
        if ( % conditional logic check here % ) {
          return $(ui.draggable).addClass('drag-revert');
        }
      }
    });

    Mi caso de uso es una tabla donde cada célula es un drop que representa un periodo de 5 minutos. Mi draggables son reservas que se inicie en una celda, sino que corren a lo largo de muchos celdas en una fila para representar el momento de la reserva.

    Yo no quiero ningún draggables se superponen, ya que representaría una doble reserva. Así que, después de la caída de encuentro de todos los draggables en la fila, con exclusión de la que me acabo de mudar, y verifique que no haya solapamientos. Si existe una coincidencia, mi lógica condicional devuelve true y me revertir la que se pueden arrastrar.

    Siguiente etapa es el fuego de una llamada ajax para actualizar la base de datos, si la lógica del lado del servidor dice que el movimiento no es válido espero volver en un estado de error y volver a la arrastrables.

    P. S. esta es mi primera respuesta, lo siento si he hecho algo mal. Consejos sobre cómo proporcionar buenas respuestas aceptó de buen grado.

    Edit: Después de probar mi llamada AJAX, me di cuenta de que hay una ventana de oportunidad para que el drop.función de la gota para hacer lo que tiene que hacer antes de la arrastrables.revertir función se ejecuta. Por el momento mi llamada AJAX devuelve false, la ventana había pasado y la clase se agrega demasiado tarde para arrastrarse.volver a reaccionar.

    Como tal, no puedo confiar en la posibilidad de arrastrar.revertir la función, en lugar de actuar únicamente sobre la respuesta de AJAX y si es false, el uso de animate() para devolver la posibilidad de arrastrar a su posición original, de la siguiente manera:

    JS:

    $( '.draggable-elements' ).draggable();
    
    $( '.droppable-elements' ).droppable({
      drop: function( event, ui ) {
        var postData = {
          id: 1,
          ...
        };
        $.post( '/ajax/url', postData, function( response ) {
          var response = $.parseJSON( response );
          if ( response.status != 1 ) {
            return ui.draggable.animate( {left: 0, top: 0}, 500 );
          }
        }
      }
    });

    Usted puede necesitar para tener la posibilidad de arrastrar.inicio/arrastre agregar el original a la izquierda y la parte superior de los valores de la arrastrarse como atributos de datos, pero para mí el anterior funcionaba bien.

    • La solución más elegante, en mi opinión. El uso de drop accept es demasiado de una exageración, ya que serán evaluados con cada movimiento de la posibilidad de arrastrar. Por el contrario, drggable revert se evalúa sólo una vez cuando el arrastrarse es en realidad bajó.
  3. 4

    Trate de añadir ese código en la «caída» del evento. Aquí está una demo.

    HTML

    <div class="draggable ui-widget-content correct"><p>1</p></div>
    <div class="draggable ui-widget-content"><p>2</p></div>
    <div class="draggable ui-widget-content"><p>3</p></div>
    <div class="draggable ui-widget-content"><p>4</p></div>
    <br style="clear: both">
    <div id="droppable" class="ui-widget-header">
      <p>Drop me here</p>
    </div>

    Script

    $(function() {
    
     $(".draggable").draggable({ revert: true });
    
     $("#droppable").droppable({
      activeClass: 'ui-state-hover',
      hoverClass: 'ui-state-active',
      //uncomment the line below to only accept the .correct class..
      //Note: the "drop" function will not be called if not ".correct"
      // accept : '.correct',
      drop: function(event, ui) {
       //alternative method:
       //if (ui.draggable.find('p').text() == "1") {
       if (ui.draggable.is('.correct')) {
        $(this).addClass('ui-state-highlight').find('p').html('You got it!');
        //cloning and appending prevents the revert animation from still occurring
        ui.draggable.clone(true).css('position', 'inherit').appendTo($(this));
        ui.draggable.remove();
       } else {
        $('#droppable > p').html('Not that one!')
        setTimeout(function(){ $('#droppable > p').html('Drop here'); }, 1000);
       }
      }
     });
    
    });

    Como se puede ver en la secuencia de comandos, usted puede buscar para el .correct clase o el texto dentro (comentarios fuera de línea)

  4. 1
    $("#droppable").droppable({ 
        accept: function(dropElem) {
            //dropElem was the dropped element, return true or false to accept/refuse it
            if($(this).data('stoneclass') == dropElem.attr("id")){
                return true;
        }
    }
    });​

    Esto se utiliza para aceptar sólo uno puede arrastrarse, a partir de un grupo de draggables ; para una correcta lanzables, en un grupo de droppables.

    P. S lo siento por el idioma si no es comprensible =)

  5. 0

    Me pareció que si yo simplemente set-top:0 y a la izquierda:0, el punto es que ya no se pueden arrastrar. Con el fin de «obligar» a una reversión tenía que hacer esto:

    $draggedObj.css({ top: 0, left: 0 })
    $draggedObj.draggable( "destroy" )
    $draggedObj.draggable({...whatever my draggable options are...});

Dejar respuesta

Please enter your comment!
Please enter your name here