Lista dostępna - wyłącza przenoszenie elementów potomnych poza element nadrzędny.

Question

Moja lista umożliwia przenoszenie elementów potomnych poza element nadrzędny, a ja chcę to zmienić.

Jak widać, ruchome elementy podrzędne z wnętrza jednostki dominującej do innego rodzica powinno być dozwolone, ale przenoszenie elementów podrzędnych poza każdej pozycji dominującej nie powinno być dozwolone.

Myślę, że kod będzie zbyt długa, więc tutaj jest gniazdowa lista podobna do Używam nestableList from Luna theme, a tutaj jest skrypt jquery.nestable.js

Answer 1

W przykładzie który podałeś, plugin jQuery stosowany jest Nestable from dbushell . Czy masz kontrolę nad wtyczką, z której będziesz korzystać? Projekt jest całkowicie martwy i nie był aktualizowany od 2 lat.

To może być mądre, aby sprawdzić, czy nadal istnieje rozwiązanie i zaproponować funkcję, która jest w zasadzie funkcją "protectRoot", którą ma obecnie wiele bibliotek.

Jeśli nie masz kontroli nad wtyczką, ta funkcja w tej chwili nie jest zaimplementowana i prawdopodobnie nigdy nie będzie.

Jeśli masz kontrolę nad wtyczką, ale nadal chcesz skorzystać z tej, rozwiązaniem może być użycie widelca (jest wiele, ponieważ projekt jest martwy), który jest nadal utrzymywany i ma tę funkcję.

Innym rozwiązaniem byłoby wybrać kod, który Cię interesuje, z wielu zgłoszonych do projektu pull requests, ale nigdy nie zostanie on scalony.

Na przykład ten pull request dodawać nowe wywołania zwrotne zamiast jedynego dostępnego w danej chwili: beforeDragStart, dragStart, dragMove, beforeDragEnd, dragEnd itd Te nowe wywołania zwrotne zapewnia wiele argumentów typu elementu, który aktualnie ruchomego, gdzie to było zanim zacząłeś ciągnąć to i miejsce przeznaczenia. Na podstawie tych nowych informacji, a zwłaszcza miejsca docelowego, można anulować przeciąganie, jeśli miejsce docelowe jest węzłem głównym.

$('.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. 
}); 

Kolejna prośba przyciąganie, które mogłyby odpowiada Twoim potrzebom jest this one. Zapewnia wywołanie zwrotne w celu odrzucenia określonego zdarzenia przeciągania, można na przykład odrzucić zdarzenie przeciągania, jeśli element, który jest przeciągany, staje się elementem głównym.

$('.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

Uwaga 1 przed przeczytaniem tej odpowiedzi odnoszą się do other odpowiedź, to jest naprawdę przydatne i bardzo mi pomogło. Uwaga 2 jak wspomniano w tej odpowiedzi, a autor biblioteki original library, ta biblioteka jest całkowicie martwa. Ale jest ktoś, kto bierze odpowiedzialność za ciągłe rozwijanie tej biblioteki, tutaj jest nawet nowa biblioteka, która nie obsługuje reguł odrzucania, i wciąż musisz użyć żądania ściągnięcia biblioteki.

Miałem DOKŁADNIE ten sam przypadek pytającego (i to, co sprawiło, że dotarłem tutaj). Oto jak rozwiązać mój problem (i mam nadzieję, że to pomoże innym)

Odpowiedź

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

mogę wymyślić coś dobrego rozwiązanie z wszystkimi możliwymi do zagnieżdżenia żądaniami ściągania i samymi gniazdami. Znalazłem rozszerzenie this dla jQuery-UI do sortowania. Tutaj masz nieruchomość protectRoot. Działa to świetnie. Przykładowy kod:

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 
});