List Items Array on Sortable List

Questions
1

Is there some sort of ‘F7 way’ to get the reordered list after dragging the elements ?

Or I have to go the ‘manual’ way, like this:

// Init manage-curves page
$$(document).on('page:init', '.page[data-name="manage-curves"]', function (e) {
    loadListManageCurves();

    //$$('#list-manage-curves').on('sortable:sort', function (listEl, indexes) {
    //    alert('Test from:' + indexes.from + ', to:' + indexes.to);
    //});

    $$('#fab-save-manage-curves').on('click', function () {
        var test = '';
        var counter = 0;        
        $$('#list-manage-curves ul li').each(function () {
            counter++;
            test += '\nRow Id for db: ' + $$(this).attr('data-row-id') + '\nNew Sort value for db: ' + counter; 
        });
        alert(test);
    });
})

Thanks
2

Well if you have it in some array, then you can stick to sortable:sort event:


var arr = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

$$('#list-manage-curves').on('sortable:sort', function (listEl, indexes) {
  // array before sort
  console.log(arr);

  // move item in array
  arr.splice(indexes.to, 0, arr.splice(indexes.from, 1)[0]);
  
  // array after sort
  console.log(arr);
});
1 Like
3

Yes basically data is in an array (comes out from a db) on the mobile,
reordered by the user, and then resaved and passed to an iot device.

At the moment I had changed my first test in:

$$(’#fab-save-manage-curves’).on(‘click’, function () {
var curves = [], counter = 0;
$$(’#list-manage-curves ul li’).each(function () {
counter++;
var curveObj = { id: $$(this).attr(‘data-row-id’), sort: counter };
curves.push(curveObj);
});
updateCurvesAfterSortOrder(curves);
});

Since the amount of data is quite small I was looking at the moment only for a quick test solution
and I was curious if the framework had like some sort of method that returned the sorted array.

Thanks Vladimir for pointing my attention also to the splice() method of arrays.
and really really impressed of the job you have done on framework7 (that I have discovered only a couple of weeks ago :open_mouth:), super !!!