jQuery-UI sortable - synchronize array (model) after update

Question

Let's say I have an array containing data, it would probably come from Ajax (but no need to do this here).

With that array I generate the content of a UL element, I make that UL sortable, with jQuery-UI

I would like to keep the order of the array synchronized with the UL, after the client sorts it anyway.

Is there an elegant way of doing this?

var locations = [
  {name: 'point 0', location: [50.8674162,4.3772933]},
  {name: 'point 1', location: [50.8135113,4.3247394]},
  {name: 'point 2', location: [50.8771732,4.3544551]},
  {name: 'point 3', location: [50.8460485,4.3664706]}
];

function generateUl() {
  var content = '';
  for(var i in locations) {
    content += '<li>'+ locations[i].name +' ('+ locations[i].location.toString() +')</li>';
  }
  $('#points').html(content);

}

$(document).ready(function() {
  generateUl();
  $('#points').sortable({
    update: function(event, ui) {
      //$('#points li').each( function(e) {
      //});
      
      // so, I would like to see this display change after every update and have the order match
      $('#display').html(JSON.stringify(locations));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="points"></ul>
<div id="display"></div>

2k reputation on stackoverflow and still not using snippets? you should be ashamed :) — Dekel
– Dekel, Commented Jan 5, 2017 at 0:25

Dekel · Accepted Answer · 2017-01-05 00:30:58Z

5

A few changes in the code to get what you are looking for:

var locations = [
  {name: 'point 0', location: [50.8674162,4.3772933]},
  {name: 'point 1', location: [50.8135113,4.3247394]},
  {name: 'point 2', location: [50.8771732,4.3544551]},
  {name: 'point 3', location: [50.8460485,4.3664706]}
];

function generateUl() {
  for(var i in locations) {
    li = $('<li>'+ locations[i].name +' ('+ locations[i].location.toString() +')</li>');
    li.data('d', locations[i])
    $('#points').append(li);
  }
}

$(document).ready(function() {
  generateUl();
  $('#points').sortable({
    update: function(event, ui) {
      new_locations = $(this).find('li').map(function(i, el) {
        return $(el).data('d')
      }).get()
      
      $('#display').html(JSON.stringify(new_locations));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="points"></ul>
<div id="display"></div>

Instead of creating the li content as string - I created li elements and added the data of that point using data('d')
Inside the update function of the sortable object - I got back that data from the li nodes (based on their current position - this is the new order).

answered Jan 5, 2017 at 0:30

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emmanuel Delay Over a year ago

Thanks, perfect. I was also working on something with a data-id . That map function is exactly what I need

Collectives™ on Stack Overflow

jQuery-UI sortable - synchronize array (model) after update

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related