jQuery ziehbare Rückstellung basierend auf Bedingung

Question

Ich habe ein Problem im Zusammenhang mit jQuery ziehbar und absetzbar. Hier ist eine Beschreibung was ich machen möchte.

Erstens: Ich habe zwei Divs. Einer ist <div id="selected"> und ein anderer ist <div id="container">. "container" hat 10 <li>, die ziehbar sind und in "selected" abgelegt werden können. Hier ist der Code:

<div id="selected"> 
    <ul class="sortable-list"> 
    </ul> 
</div> 


<div id="container"> 
    <ul class="sortable-list"> 
      <li>1</li> 
      <li>2</li> 
      <li>....</li> 
      <li>9</li> 
      <li>10</li> 
    </ul> 
</div> 

Zweitens: ich alle 5 <li> s von "Container" ermöglichen wollen "ausgewählt" div. Wenn jemand versucht, 6. <li> hinzuzufügen, darf es dem Benutzer nicht erlauben. Das ist der 6. <li>, der in "selected" eingefügt wird, muss mit jQuery draggable option revert zurückgesetzt werden.

d. H. $("#container li").draggable({ revert: true }); Hier ist Javascript-Code dafür.

$(document).ready(function(){ 

    var total = 0; 
    $("#selected").droppable({ 
     drop: function() { 
       total = $("#selected li").length; 
       //alert(total); 
       if (total >= 5) { 
        $("#container li").draggable({ revert: true }); 
       } else { 
          // below code is not working 
        $("#container li").draggable({ revert: false }); // this is making whole feature weird. I can drag all the <li> anywhere 
       } 
      } 
    }); 
}); 

Das funktioniert gut.

Drittens: Aber wenn ich eine <li> von "ausgewählt" zu "Container" ziehen, die "ausgewählt" div nur 4 <li> s haben. In dieser Situation sollte der Benutzer später in der Lage sein, ein weiteres <li> in "ausgewähltes" div von "container" div hinzuzufügen. Aber leider funktioniert es nicht. Alle <li> s, die ich versuche, in "selected" zu ziehen, werden aufgrund der if (total >= 5) Bedingung zurückgesetzt.

Kann mir jemand helfen, dies mit draggable revert Option zu lösen? Bitte ...

Answer 1

Sie können die accept option verwenden, die eine Funktion, dies zu tun braucht viel einfacher, wie folgt aus:

$("#selected ul").droppable({ 
    accept: function() { 
     return $("#selected li").length < 5; 
    } 
}); 

You can test it out here. Wenn Sie Elemente herausziehen, geht die .length runter und es wird Elemente wieder akzeptieren ... kein Grund, komplizierter zu werden :)

Answer 2

Zuerst wird revert auf false gesetzt, die Funktion wird komplett deaktiviert. Wie Sie darauf hinweisen, können Sie die Ziehpunkte überall ablegen. Was Sie normalerweise wollen, ist revert: 'invalid', was bedeutet, dass es zurückgesetzt wird, wenn es auf etwas fallen gelassen wird, das nicht ein Droppable ist, das es akzeptiert.

Was Sie tun möchten, sollte so etwas sein:

$('#selected').droppable({ 
    drop: function() { 

     // since you're doing a full re-calc every time, this doesn't need to be global 
     var total = $("#selected li").length; 

     if(total >= 5) { 

      // once you've reached five, simply don't accept any more elements 
      // the rest will revert if dropped here 
      $('#selected').droppable('disable'); 
     } 
    } 
});