example - Cómo revertir la posición de una interfaz de usuario jquery que se puede arrastrar según la condición

jquery draggable sortable

Question

Tengo un elemento que se puede arrastrar y un elemento que se puede soltar. Una vez que el elemento arrastrado se suelta en la zona de descarga, estoy intentando ejecutar el siguiente código jquery psuedo:

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

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

¿Cómo uno lograría esto?

PD: Soy consciente de la opción "revertir" que se puede arrastrar, sin embargo, esto solo se activa si el elemento arrastrado no llega a la zona de colocación.

Answer 1

Descubrí que si simplemente pongo arriba: 0 e izquierda: 0, el elemento ya no se puede arrastrar. Para "forzar" una reversión tuve que hacer esto:

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

Answer 2

Hay algunas opciones integradas para esto, en tu .draggable() , configura la opción de revert a ''invalid'' , y volverá si no se colocó con éxito en un dropable, como este:

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

Luego, en su .droppable() establezca qué es válido para una caída usando la opción de accept , por ejemplo:

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

Cualquier cosa que no coincida con este selector se reinicia cuando lo sueltas, puedes ver una demostración completa aquí . La opción de aceptar también tiene una función si necesita filtrar un selector que no puede proporcionar, como esto:

$("#droppable").droppable({ 
  accept: function(dropElem) {
    //dropElem was the dropped element, return true or false to accept/refuse it
  }
});​

Answer 3

Intenta agregar ese código en el evento "soltar". Aquí hay 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>

Guión

$(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 puede ver en la secuencia de comandos, puede buscar la clase .correct o el texto en el interior (línea comentada)

Answer 4

Tuve un caso de uso en el que tuve que ejecutar algo de lógica en el método de caída del droppable para determinar si el arrastrable debería revertir. Usé lo siguiente para lograr esto:

$(''.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 celda es un dropable que representa un período de 5 minutos. Mis draggables son reservas que comienzan en una celda, pero se ejecutan en muchas celdas seguidas para representar el tiempo de reserva.

No quería que los draggables se superpongan, ya que eso representaría una doble reserva. Entonces, después de la caída, encuentro todos los draggables en la fila, excluyendo el que acabo de mover, y verifico si hay superposiciones. Si hay una superposición, mi lógica condicional devuelve verdadero y revertir el elemento arrastrable.

La siguiente etapa es lanzar 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 devolver un estado de error y revertir el elemento que se puede arrastrar.

PD: esta es mi primera respuesta, perdón si he hecho algo malo. Consejos sobre cómo proporcionar buenas respuestas con mucho gusto aceptado.

Edición: Después de probar mi llamada AJAX, me di cuenta de que hay una ventana de oportunidad para que la función droppable.drop haga su trabajo antes de que se ejecute la función draggable.revert. Para cuando mi llamada AJAX se volvió falsa, la ventana había pasado y la clase se estaba agregando demasiado tarde para que draggable.revert reaccionara.

Como tal, ya no dependo de la función draggable.revert, sino que actúo únicamente en la respuesta AJAX y, si es falso, utilizo animate () para devolver el elemento arrastrable a su posición original, de la siguiente manera:

$( ''.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 );
      }
    }
  }
});

Es posible que tenga que arrastrar y comenzar a arrastrar y agregar los valores originales izquierdo y superior del atributo arrastrable como datos, pero para mí, lo anterior funcionó bien.

Answer 5

$("#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 usó para aceptar solo un elemento arrastrable, de un grupo de elementos arrastrables; a uno correcto droppable, en un grupo de droppables.

PD perdón por el idioma si no es comprensible =)