SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.59k stars 3.7k forks source link

Sending originalArray and newArray #1806

Open beanben opened 4 years ago

beanben commented 4 years ago

Hello hello,

apologies for the basic question but I am using struggling to send the originalArray and the newArray with the new order of the elements.

Any tips welcome !

the JS:

var sortable = Sortable.create(selection, {
  handle: '.bars-move',
  animation: 150,
});

var modalForm = document.getElementById("modalForm");
if (modalForm  !== null ){
  modalForm.addEventListener('submit', function(e) {

    var formData = new FormData(modalForm);
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(modalForm.method, modalForm.action, true);
    var cookies = parse_cookies();
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);

    // var originalArray = ????;

    var newArray = [...document.querySelectorAll("#selection > tr")].map(el => el.getAttribute("data-id"));
    formData.append('newArray', JSON.stringify(newArray));

    request.send(formData);
  });
};

In the code above, newArray sends the new array - no problem - but I have no idea how to write originalArray.

thank you.

waynevanson commented 4 years ago

@Arico1985

Check out docs relating to toArray() in the readme.

I'm not sure what the difference between these two arrays are. Could you please be a little more specific?

beanben commented 4 years ago

Hi @waynevanson !, thanks for taking the time to deal with my query.

Basically say you have an array with data-id attributes of [1, 2, 3, 4), the originalArray. After the user re-orders it to [2,1,4,3], the sortableArray, I want the user to send both arrays on submit.

waynevanson commented 4 years ago

Here are the docs you're looking for:

https://github.com/SortableJS/Sortable#store https://github.com/SortableJS/Sortable#save https://github.com/SortableJS/Sortable#toarraystring

You have to save whatever store you have before the user changes it.

beanben commented 4 years ago

Sweet, I will try and most likely post more questions soon. Thank you !