jQuery-UIソート可能 - 更新後に配列（モデル）を同期する

Question

データが格納されている配列を持っているとします。おそらくAjaxから来るでしょう（ここではこれを行う必要はありません）。

私はUL要素の内容を生成し、その配列では、私は、クライアントがそれをソートした後、jQueryの-UI

とULソート可能で、私は、ULと同期配列の順序を維持したいとしますとにかく

これを行うためのエレガントな方法はありますか？

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>

Answer 1

あなたが探しているものを取得するためのコードでいくつかの変更：代わりに文字列としてliコンテンツを作成する

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>

1. を - 私はli要素を作成し、sortableオブジェクトのupdate関数内data('d')
2. を使用して、その時点のデータを追加 - （ - この新しい順序でそれらの現在位置に基づいて）私はliノードからdataその戻りました。