jQuery Sortable verhindert Benutzer Kind Element an übergeordnetem Element

Question

Ich habe diese Liste in HTML zu verschieben:

<ol class="sortable subcategory_item"> 
    <li data-id="102">A</li> 
    <li data-id="111">B</li> 
    <li data-id="1712">GROUP A 
     <ol class="group_items"> 
      <li data-id="105">GROUP MEMBER 1</li> 
      <li data-id="108">GROUP MEMBER 2</li> 
      <li data-id="109">GROUP MEMBER 3</li> 
     </ol> 
    </li> 
    <li data-id="110">C</li> 
    <li data-id="113">D</li> 
</ol> 

Das Problem ist, ich bin in der Lage Elemente unter GROUP A ihre Eltern zu bewegen.

Wie kann ich verhindern, dass GROUP MEMBER 1, GROUP MEMBER 2 und GROUP MEMBER 3 (oder Elemente innerhalb <ol class="group_items"> oben GROUP A?

ich zur Zeit verschoben bin mit jquery-sortable plugin aber ich bin in Ordnung, wenn ich mit einem anderen Plugin wechseln.

Answer 1

Sie können einfach jQuery UI sortierbaren verwenden, die die Art und Weise, die standardmäßig wollen verhält:

$('.sortable,.group_items').sortable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<ol class="sortable subcategory_item"> 
 
    <li data-id="102">A</li> 
 
    <li data-id="111">B</li> 
 
    <li data-id="1712">GROUP A 
 
    <ol class="group_items"> 
 
     <li data-id="105">GROUP MEMBER 1</li> 
 
     <li data-id="108">GROUP MEMBER 2</li> 
 
     <li data-id="109">GROUP MEMBER 3</li> 
 
    </ol> 
 
    </li> 
 
    <li data-id="110">C</li> 
 
    <li data-id="113">D</li> 
 
</ol>

Answer 2

hier ist die Demo

$("#sortable").sortable({ 
 
    change: function(event, ui) { 
 
    var currentClass = $(ui.placeholder)[0].classList[0]; 
 
    if (!$(ui.placeholder).prev().hasClass(currentClass) && !$(ui.placeholder).next().hasClass(currentClass)) 
 
     return false; 
 
    } 
 
}); 
 
$(".group_items").sortable(); 
 

 
$("#sortable").disableSelection();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
 
<ol class="sortable subcategory_item" id="sortable"> 
 
    <li data-id="102" class="grp1">A</li> 
 
    <li data-id="111" class="grp1">B</li> 
 
    <li data-id="1712" class="grp1">GROUP A 
 
    <ol class="group_items"> 
 
     <li data-id="105" class="grp">GROUP MEMBER 1</li> 
 
     <li data-id="108" class="grp">GROUP MEMBER 2</li> 
 
     <li data-id="109" class="grp">GROUP MEMBER 3</li> 
 
    </ol> 
 
    </li> 
 
    <li data-id="110" class="grp1">C</li> 
 
    <li data-id="113" class="grp1">D</li> 
 
</ol>