Definieren von Drop-Regeln für Jquery UI-Sortiervorgänge

Question

Ich habe einige Listen mit einigen verschachtelten Elementen. Mit JQuery UI Sorables kann ich Drag & Drop und Hintergrundaufrufe ausführen, um Sortierreihenfolgen zu speichern.

Es ist nun notwendig geworden, die grundlegende Sortierung auszuarbeiten und einige Regeln zu definieren.

Ich kann einen Weg dorthin bekommen, aber bin jetzt nicht in der Lage, ganz dorthin zu gelangen.

Bitte lesen Sie diesen jsfiddle

Die Regeln möchte ich schaffen sind:

1. Rezepte können nur innerhalb der Top-Level-Liste sortiert nach oben und unten und kann nicht in einen Abschnitt
2. Abschnitte fallen gelassen werden kann nur in der Top-Level-Liste nach oben und unten sortiert werden und nicht in einen Abschnitt geschachtelt werden.
3. Zutaten können in der Top-Level-Liste nach oben und nach unten sortiert werden und in einen Abschnitt
01 fallengelassen werden
4. Sektionszutaten können in der Sektion nach oben und unten sortiert werden, und Sektionszutaten können in die oberste Liste gezogen werden. Einmal in der Top-Level-Liste können sie zurück zu einem Abschnitt (oder von einem Abschnitt zum anderen) gezogen werden

Hier ist, was ich habe:

<div> 
<ul class="isort rsort ssort"> 
    <li class="recipe" >Recipe 1</li> 
    <li class="section">Section 
     <ul class="isort"> 
      <li class="ingredient" >Ingredient A</li> 
      <li class="ingredient">Ingredient B</li> 
      <li class="ingredient">Ingredient C</li> 
     </ul> 
    </li> 
    <li class="ingredient">Ingredient 1</li> 
    <li class="ingredient">Ingredient 2</li> 
    <li class="recipe" >Recipe 2</li> 
     <li class="section">Section 2 
     <ul class="isort"> 
      <li class="ingredient" >Ingredient D</li> 
      <li class="ingredient">Ingredient E</li> 
      <li class="ingredient">Ingredient F</li> 
     </ul> 
    </li> 
</ul> 

$("ul.isort").sortable({ 
    items: '.ingredient', 
    connectWith: "ul.isort", 
    placeholder: "ui-state-highlight", 
    update: function(evt, ui) { 
    //alert('dropping i sort'); 
    } 
}); 

$("ul.rsort, ul.ssort").sortable({ 
    items: '.recipe,.section', 
    connectWith: "ul > li > ul > li", 
    placeholder: "ui-state-highlight", 
    update: function(evt, ui) { 
    //alert('dropping s and r sort'); 
    } 
}); 

Wie Sie Ich kann sehen, dass ich das meiste davon tun kann, abgesehen davon, dass ich die Zutaten der obersten Ebene in Abschnitte schiebe. Auch wenn eine Zutat fallen gelassen wird, kann sie manchmal nicht mehr weiter bewegt werden. Danke fürs Lesen.

Answer 1

Nach viel rätselhaft und Überprüfung der Dokumente und andere Fragen zu hier kam ich mit dieser Lösung gibt es eine jsfiddle. Elemente, die in unzulässige Drop-Listen gezogen werden, werden an ihre ursprünglichen Positionen zurückgegeben.

(function($) { 

$('.sortable').sortable({ 
    connectWith: 'ul', 
    items: "li", 
    beforeStop: function(evt, ui) { 
    if ($(ui.item).hasClass('recipe') && $(ui.placeholder).parent()[0] != this) { 
     $(this).sortable('cancel'); 
    } 
    if ($(ui.item).hasClass('section') && $(ui.placeholder).parent()[0] != this) { 
     $(this).sortable('cancel'); 
    } 
    }, 
    update: function(evt, ui) { 
     alert('landed'); 
    } 
    }); 

})(jQuery); 

HTML: 

<ul id="main" class="sortable"> 
    <li id="item1" class="ingredient">Ingredient 0.1</li> 
    <li id="item2" class="ingredient">Ingredient 0.2</li> 
    <li id="item3" class="section">Section 1 
    <ul id="sub1"> 
     <li id="item31" class="ingredient">Ingredient 1.1</li> 
     <li id="item32" class="ingredient">Ingredient 1.2</li> 
    </ul> 
    </li> 
    <li id="item4" class="section">Section 2 
    <ul id="sub2"> 
     <li id="item41" class="ingredient">Ingredient 2.1</li> 
     <li id="item42" class="ingredient">Ingredient 2.2</li> 
    </ul> 
    </li> 
    <li id="item5" class="recipe">Recipe 0.1</li> 
    <li id="item6" class="recipe">Recipe 0.2</li> 
</ul>