Jquery droppable: Drop-Element basierend auf einer Bedingung, ansonsten zurückprallen

Question

Ich habe einige Boxen und einige Texte. Ich ziehe die Texte in diese Boxen. Der HTML-Code für die Texte, die ist gezogen werden sollten:

<div class="module-drag-text ui-draggable ui-draggable-handle">text1</div> 
<div class="module-drag-text ui-draggable ui-draggable-handle">text2</div> 
<div class="module-drag-text ui-draggable ui-draggable-handle">text3</div> 

und der HTML-Code der Kisten, in denen ich diesen Text bin ziehen ist:

<div class="module-drag-box ui-droppable"></div> 
<div class="module-drag-box ui-droppable"></div> 
<div class="module-drag-box ui-droppable"></div> 

So ist die ganze html wie folgt aussieht:

<div class="wrapper"> 
<div class="module-drag-text ui-draggable ui-draggable-handle">text1</div> 
    <div class="module-drag-text ui-draggable ui-draggable-handle">text2</div> 
    <div class="module-drag-text ui-draggable ui-draggable-handle">text3</div> 
    <div class="module-drag-box ui-droppable"></div> 
    <div class="module-drag-box ui-droppable"></div> 
    <div class="module-drag-box ui-droppable"></div> 
</div> 

Nun, was ich will, ist die text1 sollte nur auf den ersten droppable div fallen und text2 ist auf den zweiten droppable div.

Wenn ein Benutzer versucht, text1 in die zweite droppable div zu ziehen, sollte er auf seine ursprüngliche Position zurückprallen.

Der Code, den ich für Drag & Drop geschrieben ist:

drag : function() { 
    dragText.draggable({ 
     containment : ".popup", 
     revert : "invalid" 
    }); 
    dragBox.droppable({ 
     drop : function(event, ui) { 
     var drop = jQuery(event.target); 
     drop.html(ui.draggable.html()); 
     ui.draggable.remove(); 
     drop.droppable("destroy"); 
     } 
    }); 
    }, 

Aber ich weiß nicht, wo soll ich die Logik für sie schreiben. Ich weiß, dass es das accept Attribut hat, aber nicht wusste, wie man es basierend auf meinem Problem verwendet.

Answer 1

Sie können von accept Option

akzeptieren Option bestimmen, welches Element (oder eine Gruppe von Elementen) machen durch das Ziel abwerfbaren akzeptiert wird.

Verwenden revert Option

die ziehbar zu ursprünglichen Platz zurück zu bringen

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

$("#droppable").droppable({ 
    accept: '#draggable-nonvalid', 

}); 

Siehe unten stehende Demo, wo ich es für Text getan haben 1 in einem abwerfbaren, Rest des Textes fallen gewohnt, dass Drop abfallbar. Ebenso können Sie

Working Demo

Working Demo 2 für Rest - Für dynamische akzeptieren Auswahl

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

$("#droppable").droppable({ 
    accept: function(d){if($(this).hasClass(d.attr("id"))){return true;}}, 

});