I have an array like that:

tableObj =  [
  {
    label: 'here',
    value: 36,
    element: '$(the li that this info is about)',
    index: 0
  },
  {
    label: 'are',
    value: 42,
    element: '$(the li that this info is about)',
    index: 1
  },
  {
    label: 'some',
    value: 21,
    element: '$(the li that this info is about)',
    index: 2
  },
  {
    label: 'tags',
    value: 26,
    element: '$(the li that this info is about)',
    index: 3
  }
];

When I display the content of the array, I do that:

$(".sortable-list").sortable({
  axis: "y",
  containment: ".sortable-list",
  revert: true,
  start: function(event, ui) { 
    var updt = ui.item.index();
    tableObj.value = updt;
  },
  update: function(event, ui) { 
    var updt = ui.item.index();
    tableObj.index = updt;
  }
});
$( "#sortable" ).disableSelection();

Where the display is <li> tags in between an empty <ul class=".sortable-list"></ul>. What I want to do is dragging the <li> tags and reorder the elements, and by clicking a button, I want to capture the new state of the array. Which means, if I move the second element in first position, when I click the button, the array is reordered with the second element in position 0. All I manage to do with this jQuery functions above is to set a new value, but I can't manage to capture the new array reordered.

Anyone can help me please ? Thank You in advance ! :)

I have an array like that:

tableObj =  [
  {
    label: 'here',
    value: 36,
    element: '$(the li that this info is about)',
    index: 0
  },
  {
    label: 'are',
    value: 42,
    element: '$(the li that this info is about)',
    index: 1
  },
  {
    label: 'some',
    value: 21,
    element: '$(the li that this info is about)',
    index: 2
  },
  {
    label: 'tags',
    value: 26,
    element: '$(the li that this info is about)',
    index: 3
  }
];

When I display the content of the array, I do that:

$(".sortable-list").sortable({
  axis: "y",
  containment: ".sortable-list",
  revert: true,
  start: function(event, ui) { 
    var updt = ui.item.index();
    tableObj.value = updt;
  },
  update: function(event, ui) { 
    var updt = ui.item.index();
    tableObj.index = updt;
  }
});
$( "#sortable" ).disableSelection();

Where the display is <li> tags in between an empty <ul class=".sortable-list"></ul>. What I want to do is dragging the <li> tags and reorder the elements, and by clicking a button, I want to capture the new state of the array. Which means, if I move the second element in first position, when I click the button, the array is reordered with the second element in position 0. All I manage to do with this jQuery functions above is to set a new value, but I can't manage to capture the new array reordered.

Anyone can help me please ? Thank You in advance ! :)

• javascript
• jquery
• html
• arrays

3 Answers 3

Thanks to Alexandr Fedotov! He drove me on the right path! :) Here is my solution:

var manipulate, oldIndex;
$(".sortable-list").sortable({
     axis: "y",
     containment: ".sortable-list",
     revert: true,

     start: function(event, ui) { 
          var updt = ui.item.index();
          manip = updt;
          console.log("Start: " + manipulate);
          oldIndex = sortableList[manipulate];
     },

     update: function(event, ui) { 
          var newIndex = ui.item.index();
          console.log("End: " + newIndex);
          sortableList.splice(manipulate, 1);
          sortableList.splice(newIndex, 0, oldIndex);

          console.log(sortableList);
          }
   });

   $(".sortable-list").disableSelection();

I had to create a table every time I added a <li>. Then, I catch who's the one who is dragged and drop. In the function "update", we remove the item from the array (previously save into the variable oldIndex) then we add it into its new index in the array. I hope this will help somebody else! :)

Use var newList=$(".sortable-list").sortable("toArray")

Check this Codepen examples:

https://codepen.io/Sinetheta/pen/qvbCr?editors=1111

https://codepen.io/fraigo/pen/WawQBy

Possible solution: modify your markup a bit, to add data-attribute to each li, which contains an identifier of the current element from tableObj array.

In the update function get the identifier of the currently moved element:

var id = $(event.toElement).data('id');

Using this identifier find the element in the tableObj array:

var obj = tableObj.find(function(o) { return o.id === id});

Afterwards find an old index of the recently moved object:

var oldIndex = tableObj.indexOf(obj);

Getting a new index of the object:

var newIndex = ui.item.index();

Then remove obj from old position and insert at the new index:

tableObj.slice(oldIndex, 1);
tableObj.slice(newIndex, 0, obj);

Afterwards you will have your array with correct order of element(same as on the view). If you don't need to reorder array on the fly - you can create a copy of the original array and perform modifications on the copy.