Verschachtelungsliste - Deaktivieren von untergeordneten Elementen aus dem übergeordneten Element

Question

Meine Liste ermöglicht das Verschieben von untergeordneten Elementen aus übergeordneten Elementen, und ich möchte sie ändern.

Wie Sie sehen können, Kind Dreher aus dem Inneren des Elternteils zu einem anderen Elternteil erlaubt sein sollte, aber Elemente außerhalb jeder übergeordneten Artikel Kind bewegt sich nicht erlaubt sein sollte.

ich der Code denken würde zu lange dauern, so ist hier die nestbarer Liste ähnlich zu, dass ich nestableList from Luna theme bin mit, und hier ist das Skript jquery.nestable.js

Answer 1

Im Beispiel Sie zur Verfügung gestellt, verwendete die jQuery-Plugin ist Nestable from dbushell . Haben Sie eine Kontrolle über das Plugin, das Sie am Ende verwenden werden? Das Projekt ist tot und wurde seit 2 Jahren nicht mehr aktualisiert.

Es könnte sinnvoll sein, nach einer Lösung zu suchen, die immer noch gewartet wird, und eine Funktion vorzuschlagen, die eine "protectRoot" -Funktion ist, die heutzutage in vielen Bibliotheken verwendet wird.

Wenn Sie keine Kontrolle über das Plugin haben, ist diese Funktion im Moment nicht implementiert und wird wahrscheinlich nie sein.

Wenn Sie Kontrolle über das Plugin haben, aber immer noch dieses verwenden möchten, könnte eine Lösung sein, eine Gabelung zu verwenden (es gibt viele, da das Projekt tot ist), die immer noch verwaltet wird und über diese Funktion verfügt.

Eine andere Lösung wäre, wählen Sie selbst Code, der Sie interessiert sind in den vielen pull requests eingereicht, aber das Projekt wird nie zusammengeführt werden.

Zum Beispiel dieses pull request neue Rückrufe hinzufügen statt dem nur eines zur Zeit zur Verfügung: beforeDragStart, dragStart, dragMove, beforeDragEnd, dragEnd etc. bietet diese neuen Rückrufe viele Argumente wie der Artikel, die Sie gerade bewegt, wo Es war bevor du angefangen hast es zu ziehen und das Ziel. Basierend auf diesen neuen Informationen und insbesondere dem Ziel, können Sie das Ziehen abbrechen, wenn das Ziel ein Wurzelknoten ist.

$('.dd').nestable({}) 
.on('dragMove', function(event, item, source, destination) { 
    // item: item we're moving. 
    // source: original source of the item. 
    // destination: new position of the item. 
}); 

Eine weitere Pull-Anforderung, das könnte Ihre Bedürfnisse entspricht ist this one. Es bietet einen Rückruf, um ein bestimmtes Ziehereignis abzulehnen. Sie könnten beispielsweise ein Ziehereignis ablehnen, wenn das gezogene Element ein Stammelement wird.

$('.dd').nestable({ 
    reject: [ 
    { 
     rule: function() { 
     // $(this) refers to the dragged element. 
     // Return TRUE to cancel the drag action. 

     return $(this).parent().hasClass("rootList"); 
     } 
    } 
    ] 
}); 

Answer 2

Anmerkung 1 bevor diese Antwort beziehen sich auf die other Antwort zu lesen, ist es wirklich nützlich und hat mir sehr geholfen. Hinweis 2 wie diese Antwort sagte, und der Autor der original library, ist diese Bibliothek vollständig tot. Aber es gibt jemanden, der die Verantwortung übernimmt, diese Bibliothek weiter zu entwickeln, hier ist die new libraryHinweis 3 selbst die neue Bibliothek unterstützt keine Zurückweisungsregeln, und Sie müssen immer noch eine Pull-Anforderung der Bibliothek verwenden.

Ich hatte genau den gleichen Fall des Fragestellers (und das, was mich hier erreichen).Hier ist, wie ich mein Problem gelöst (und ich hoffe, dass diese anderen helfen)

Antwort

HTML

<div class="dd" id="nestable-example"> 
    <ol class="dd-list"> 

     <li class="dd-item" data-id="0" data-type="root"> 
      <div class="dd-handle">Root 0</div> 
      <ol class="dd-list"> 
       <li class="dd-item" data-id="1" data-type="child"> 
        <div class="dd-handle">Child 1</div> 
       </li> 
       <li class="dd-item" data-id="2" data-type="child"> 
        <div class="dd-handle">Child 2</div> 
       </li> 
       <li class="dd-item" data-id="3" data-type="child"> 
        <div class="dd-handle">Child 2</div> 
       </li> 
      </ol> 
     </li> 

     <li class="dd-item" data-id="4" data-type="root"> 
      <div class="dd-handle">Root 4</div> 
      <ol class="dd-list"> 
       <li class="dd-item" data-id="5" data-type="child"> 
        <div class="dd-handle">Child 5</div> 
       </li> 
       <li class="dd-item" data-id="6" data-type="child"> 
        <div class="dd-handle">Child 6</div> 
       </li> 
      </ol> 
     </li> 

    </ol> 
</div> 

JavaScript

$('#nestable-example').nestable({ 
    group: 'categories', // you can change this name as you like 
    maxDepth: 2, // this is important if you have the same case of the question 
    reject: [{ 
     rule: function() { 
      // The this object refers to dragRootEl i.e. the dragged element. 
      // The drag action is cancelled if this function returns true 
      var ils = $(this).find('>ol.dd-list > li.dd-item'); 
      for (var i = 0; i < ils.length; i++) { 
       var datatype = $(ils[i]).data('type'); 
       if (datatype === 'child') 
        return true; 
      } 
      return false; 
     }, 
     action: function (nestable) { 
      // This optional function defines what to do when such a rule applies. The this object still refers to the dragged element, 
      // and nestable is, well, the nestable root element 
      alert('Can not move this item to the root'); 
     } 
    }] 
}); 

Answer 3

ich kann Ich finde kein gutes Lösung mit allen nestbaren Pull-Anforderungen und nestable selbst. Ich stieß auf this Erweiterung für jQuery-UI sortierbar. Hier haben Sie die Eigenschaft protectRoot. Das funktioniert großartig. Beispielcode:

HTML

<ol class="sortable"> 
    <li><div>Some content</div></li> 
    <li> 
     <div>Some content</div> 
     <ol> 
      <li><div>Some sub-item content</div></li> 
      <li><div>Some sub-item content</div></li> 
     </ol> 
    </li> 
    <li><div>Some content</div></li> 
</ol> 

Javascript

$('.sortable').nestedSortable({ 
    handle: 'div', 
    items: 'li', 
    toleranceElement: '> div', 
    protectRoot: true, 
    maxLevels: 2 
});