Issue

This Content is from Stack Overflow. Question asked by Deen

I’m using SortableJS and have a nested sortable list.

<ul id="nestedDemo" class="nested-sortable">
    <li data-id="11">Item 1.1
        <ul class="nested-sortable">
            <li data-id="21">Item 2.1</li>
            <li data-id="22">Item 2.2
                <ul class="nested-sortable">
                    <li data-id="32">Item 3.2</li>
                    <li data-id="33">Item 3.3</li>
                    <li data-id="34">Item 3.4</li>
                </ul>
            </li>
            <li data-id="23">Item 2.3</li>
            <li data-id="31">Item 3.1</li>
            <li data-id="24">Item 2.4</li>
        </ul>
    </li>
    <li data-id="12">Item 1.2</li>
    <li data-id="13">Item 1.3</li>
    <li data-id="14">Item 1.4
        <ul class="nested-sortable">
            <li data-id="21">Item 2.1</li>
            <li data-id="22">Item 2.2</li>
            <li data-id="23">Item 2.3</li>
            <li data-id="24">Item 2.4</li>
        </ul>
    </li>
    <li data-id="15">Item 1.5</li>
</ul>

With the following script I get an JSON string with each that changed.

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

for( var i = 0; i < nestedSortables.length; i++ )
{
    new Sortable( nestedSortables[i], {
        group: 'nested',
        dataIdAttr: 'data-id',
        fallbackOnBody: true,
        swapThreshold: 0.65,
        store: {
            set: function (evt) {
                var order = evt.toArray();
                console.log("Order: "+ JSON.stringify( order ) );
            }
        }
    });
}

The problem is that I need the whole tree as an JSON string or array to store it and not only the values of the that have changes in.

How can I get an array with the whole tree?

Solution

You could store all nested sortables inside an array, and then get the order from each of them on set.

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

// ARRAY TO STORE ALL NESTED SORTABLES
const sortables = []

for (var i = 0; i < nestedSortables.length; i++) {

  var sortable = Sortable.create(nestedSortables[i], {
    group: 'nested',
    dataIdAttr: 'data-id',
    fallbackOnBody: true,
    swapThreshold: 0.65,
    store: {
      set: function(sortable) {
        // ITERATE EACH NESTED SORTABLE IN OUR ARRAY
        for (let s of sortables) {
          // GET THE ORDER OF THIS SORTABLE
          let order = s.toArray();
          console.log(order.join('|'));
        }
      }
    }
  });

  // PUSH THE NEW SORTABLE IN OUR ARRAY
  sortables.push(sortable)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

<ul id="nestedDemo" class="nested-sortable">
  <li data-id="11">Item 1.1
    <ul class="nested-sortable">
      <li data-id="21">Item 2.1</li>
      <li data-id="22">Item 2.2
        <ul class="nested-sortable">
          <li data-id="32">Item 3.2</li>
          <li data-id="33">Item 3.3</li>
          <li data-id="34">Item 3.4</li>
        </ul>
      </li>
      <li data-id="23">Item 2.3</li>
      <li data-id="31">Item 3.1</li>
      <li data-id="24">Item 2.4</li>
    </ul>
  </li>
  <li data-id="12">Item 1.2</li>
  <li data-id="13">Item 1.3</li>
  <li data-id="14">Item 1.4
    <ul class="nested-sortable">
      <li data-id="21">Item 2.1</li>
      <li data-id="22">Item 2.2</li>
      <li data-id="23">Item 2.3</li>
      <li data-id="24">Item 2.4</li>
    </ul>
  </li>
  <li data-id="15">Item 1.5</li>
</ul>

This Question was asked in StackOverflow by Deen and Answered by GrafiCode It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.