プラグインも使わないですし、これが一番シンプルな方法なんじゃないかと。
ドラッグ後にコールバックして要素の取得ができるので、並び順をそのままデータベースに登録したりといった応用もこれでバッチリですね。
id:box_1
id:box_2
id:box_3
id:box_4
id:box_5
HTML部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- 並べ替える要素の一覧 --> <div id="box"> <div id="box_1" class="card bg-primary text-white my-1"> <div class="card-body">id:box_1</div> </div> <div id="box_2" class="card bg-success text-white my-1"> <div class="card-body">id:box_2</div> </div> <div id="box_3" class="card bg-info text-white my-1"> <div class="card-body">id:box_3</div> </div> <div id="box_4" class="card bg-warning text-white my-1"> <div class="card-body">id:box_4</div> </div> <div id="box_5" class="card bg-danger text-white my-1"> <div class="card-body">id:box_5</div> </div> </div> <!-- 要素の一覧を表示する部分 --> <div class="card mt-5"> <div id="result_box" class="card-body"> </div> </div> |
JavaScript部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!-- jQuery 3.1.0 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- jQuery UI 1.12.1 --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script type="text/javascript"> function put_result(ui){ $("#result_box").html("現在の要素のIDの順番は下記のとおりです。<br />"); $("#box").find(".card").each(function(index, element){ var id = $(this).attr("id"); $("#result_box").append(id+"<br />"); }); if(ui){ // もしドラッグ後であれば // ドラッグされた要素のIDを取得 var dragged_id = ui.item[0].id; $("#result_box").append("ドラッグされた要素のIDは"+dragged_id+"です<br />"); } } $(function(){ put_result(); $("#box").sortable({ axis: "y", // ドラッグの方向を縦に固定 "opacity": 0.5, // ドラッグ中の透明度 "update": function(event,ui){ // ドラッグ完了後のコールバック put_result(ui); } }); }); </script> |