wake-up-neo.com

so ändern Sie die Position einer Jquery-Benutzeroberfläche, je nach Bedingung

Ich habe ein Element, das ziehbar ist, und ein Element, das abschiebbar ist. Sobald das gezogene Element in der Dropzone abgelegt wurde, versuche ich den folgenden Jquery-Pseudo-Code auszuführen:

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

die revert()-Funktion verschiebt das gezogene Element in seine ursprüngliche Position. 

Wie würde man das schaffen?

P.S. Mir ist die ziehbare Option "Zurücksetzen" bekannt, die jedoch nur aktiviert wird, wenn das gezogene Element nicht in die Dropzone gelangt.

29
Ash

Dazu gibt es einige eingebaute Optionen. Setzen Sie für Ihre .draggable() die revert-Option auf 'invalid', und sie wird zurückgesetzt, wenn sie nicht erfolgreich auf eine Dropable gefallen ist:

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

Dann in Ihrem .droppable() set, was für ein Drop mit der Option accept gültig ist, zum Beispiel:

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

Alles, was nicht mit diesem Selektor übereinstimmt, wird zurückgesetzt, wenn Sie loslassen, eine vollständige Demo finden Sie hier . Die Option "Akzeptieren" übernimmt auch eine Funktion, wenn Sie die Filterung eines Selektors wie folgt durchführen müssen:

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

Ich hatte einen Anwendungsfall, bei dem ich eine Logik in der Drop-Methode von droppable ausführen musste, um zu bestimmen, ob das Draggable zurückgesetzt werden sollte. Ich habe folgendes verwendet, um dies zu erreichen:

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

Mein Anwendungsfall ist eine Tabelle, in der jede Zelle ein Abwurfobjekt darstellt, das einen Zeitraum von 5 Minuten darstellt. Meine Draggables sind Buchungen, die in einer Zelle beginnen, aber über viele Zellen in einer Reihe laufen, um die Buchungszeit darzustellen. 

Ich wollte keine Draggables überlappen, da dies eine Doppelbuchung darstellen würde. Nach dem Ablegen finde ich also alle Draggables in der Zeile, mit Ausnahme des gerade verschobenen, und überprüfe, ob es Überlappungen gibt. Wenn es eine Überlappung gibt, gibt meine bedingte Logik true zurück, und ich ziehe das Draggable zurück.

Der nächste Schritt ist das Auslösen eines Ajax-Aufrufs zum Aktualisieren der Datenbank. Wenn die serverseitige Logik sagt, dass die Verschiebung ungültig ist, hoffe ich, einen Fehlerstatus zurückzugeben und das Draggable zurückzusetzen.

P.S. Dies ist meine erste Antwort, sorry, wenn ich etwas falsch gemacht habe. Tipps, wie man gute Antworten geben kann, werden gerne angenommen.

Edit: Nachdem ich meinen AJAX -Aufruf ausprobiert hatte, wurde mir klar, dass die Funktion droppable.drop ein Fenster für die Ausführung der Aufgabe hat, bevor die Funktion draggable.revert ausgeführt wird. Als mein AJAX - Aufruf false zurückgab, war das Fenster bestanden und die Klasse wurde zu spät hinzugefügt, damit draggable.revert reagieren konnte.

Daher verlasse ich mich nicht mehr auf die Funktion draggable.revert. Stattdessen arbeite ich ausschließlich mit der Antwort AJAX und bei false mit animate (), um das Draggable wie folgt an seine ursprüngliche Position zurückzubringen:

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

Möglicherweise müssen Sie draggable.start/drag hinzufügen, um die ursprünglichen linken und oberen Werte der Draggable als Datenattribute hinzuzufügen, aber für mich funktionierte das einwandfrei.

7
PaulPrecept

Fügen Sie diesen Code in das Ereignis "drop" ein. Hier ist eine 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>

Skript

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

});

Wie Sie im Skript sehen können, können Sie entweder nach der .correct-Klasse oder nach dem darin enthaltenen Text suchen (auskommentierte Zeile).

4
Mottie
$("#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;
    }
}
});​

Dies wurde verwendet, um nur ein Draggable aus einer Gruppe von Draggables zu akzeptieren. zu einem richtigen abwerfbaren, in einer Gruppe von abwerfbaren.

P.S sorry für die Sprache, wenn es nicht verständlich ist =)

1
Roshan Poudyal

Ich habe festgestellt, dass das Element nicht mehr ziehbar ist, wenn ich einfach top: 0 und left: 0 setze. Um eine Wiederholung zu erzwingen, musste ich Folgendes tun:

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