wie die Position einer jquery UI basierend auf der Bedingung zurückgesetzt werden kann

Question

Ich habe ein Element, das ziehbar ist und ein Element, das dropable ist. Sobald das gezogene Element auf dem Sprungplatz fallen gelassen Ich versuche, die folgende Jquery psuedo Code auszuführen:

if(draggedelement == value){ 

$(draggedelement).hide(); 

} 
else{ 

$(draggedelement).revert(); 

} 

wo die revert() Funktion bewegt das gezogene Element wieder in seine ursprüngliche Postion.

Wie würde man dies erreichen?

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

Answer 1

Es sind einige eingebaute Optionen für diese, auf Ihrem .draggable(), stellen Sie die revert option auf 'invalid', und es wird zurückgehen, wenn es nicht war erfolgreich fiel auf einen abwerfbaren, wie folgt aus:

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

Dann in Ihrem .droppable() Satz, was für einen Tropfen gültig ist mit dem accept option, zum Beispiel:

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

Alles, was nicht die Auswahl, Anpassung wird zurückgesetzt, wenn Sie lassen Geh, you can see a full demo here. Die akzeptieren Option nimmt auch eine Funktion, wenn Sie einen Selektor benötigen Filterung nicht zur Verfügung stellen kann, wie folgt aus:

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

Answer 2

Versuchen Sie, diesen Code in das Ereignis "drop" einzufügen. Hier ist ein 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); 
    } 
    } 
}); 

}); 

Wie Sie im Skript sehen können, können Sie entweder suchen die .correct Klasse oder den Text innen (auf Kommentar Linie)

Answer 3

$("#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, nur eine ziehbar zu akzeptieren, die aus einer Gruppe von draggables; zu einem richtigen Droppable, in einer Gruppe von Droppables.

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

Answer 4

Ich hatte einen Anwendungsfall, wo ich, wenn die ziehbar zurückkehren sollte, um bestimmen musste eine gewisse Logik in den abwerfbaren der Drop-Methode ausgeführt werden. Früher habe ich die folgenden 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 eine abwerfbaren die eine Dauer von 5 Minuten ist. Meine Draggables sind Buchungen, die in einer Zelle beginnen, aber über mehrere Zellen hintereinander laufen, um die Buchungszeit darzustellen.

Ich wollte nicht, dass sich irgendwelche Draggables überlappen, da dies eine doppelte Buchung darstellen würde. Also, nach dem Drop finde ich alle ziehbaren Teile in der Reihe, ausgenommen die, die ich gerade bewegt habe, und überprüfe, ob es Überlappungen gibt.Wenn es eine Überlappung gibt, gibt meine bedingte Logik true zurück und ich ziehe die ziehbare zurück.

Die nächste Stufe besteht darin, einen AJAX-Aufruf zu starten, um die Datenbank zu aktualisieren. Wenn die serverseitige Logik angibt, dass die Verschiebung ungültig ist, hoffe ich, einen Fehlerstatus zurückzugeben und den ziehbaren Zustand wiederherzustellen.

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

Bearbeiten: Nach dem Versuch, meinen AJAX-Aufruf, erkannte ich, gibt es ein Fenster der Gelegenheit für die Funktion droppable.drop, um es zu tun, bevor die draggable.revert-Funktion ausgeführt wird. Zu dem Zeitpunkt, als mein AJAX-Aufruf falsch zurückkehrte, war das Fenster abgelaufen und die Klasse wurde zu spät hinzugefügt, um ziehbar zu sein.

Als solche, ich bin kein Verlass mehr auf die draggable.revert Funktion, sondern ausschließlich auf die AJAX-Antwort und wenn falsch handeln, belebtes() verwendet die ziehbar zurückzukehren zu seiner ursprünglichen Position ist, wie folgt:

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

Sie müssen möglicherweise draggable.start/ziehen die ursprüngliche links hinzufügen und Top-Werte der ziehbar haben als Datenattribute, aber für mich die oben hat gut funktioniert.

Answer 5

Ich fand, dass, wenn ich einfach top: 0 und links: 0, das Element nicht mehr ziehbar ist. Um eine Wiederherstellung zu "erzwingen", musste ich dies tun:

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