[jQuery UI] ソートを実装する（Sort）

投稿日：2018年5月27日

jQueryUIで、リストをソートするサンプルです。

サンプルソース

例）jQuery UIでリストからソートするサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQueryUIソートサンプル</title>
<style>
#lst01{
  list-style-type:none;
  width:200px;
}
#lst01 li{
  border:1px solid #808080;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
$(function(){
  var arr = new Array();

  //ソート設定
  $('#lst01').sortable();

  //ボタンクリックイベント（順序を取得する）
  $("#btn1").click(function(){
    arr = new Array();
    var a = $("#lst01").children();
    for(var i=0;i<a.length;i++){
      console.log(a[i].id, a[i].innerText);
      arr.push(a[i].innerText);
      //arr.push(a[i].id);  //IDにしたい場合はこちら
    }
    $('#result').text(arr.join("→"));
  });

});
</script>
</head>
<body>
  <ul id="lst01">
    <li id="1">札幌</li>
    <li id="2">東京</li>
    <li id="3">名古屋</li>
    <li id="4">大阪</li>
    <li id="5">福岡</li>
  </ul>
  <input type="button" id="btn1" value="並びを取得">
  <p id="result"></p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryUIソートサンプル</title>

<style>

#lst01{

list-style-type:none;

width:200px;

}

#lst01 li{

border:1px solid #808080;

}

</style>

$(function(){

var arr = new Array();

//ソート設定

$('#lst01').sortable();

//ボタンクリックイベント（順序を取得する）

$("#btn1").click(function(){

arr = new Array();

var a = $("#lst01").children();

for(var i=0;i<a.length;i++){

console.log(a[i].id, a[i].innerText);

arr.push(a[i].innerText);

//arr.push(a[i].id); //IDにしたい場合はこちら

}

$('#result').text(arr.join("→"));

});

</script>

</head>

<body>

</ul>

</body>

</html>

実行サンプル

↓ドラッグドロップで並び順を変更できます。

札幌
東京
名古屋
大阪
福岡

解説

jQueryUI（Selectable）公式ページ ⇒ https://jqueryui.com/selectable/

執筆者：とら