jQuery UIを使って、要素をドラッグ＆ドロップ後に要素の順番を取得する方法

プラグインも使わないですし、これが一番シンプルな方法なんじゃないかと。
ドラッグ後にコールバックして要素の取得ができるので、並び順をそのままデータベースに登録したりといった応用もこれでバッチリですね。

id:box_1

id:box_2

id:box_3

id:box_4

id:box_5

HTML部分

<!-- 並べ替える要素の一覧 -->
<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>

</div>

</div>

</div>

</div>

</div>

</div>

JavaScript部分

<!-- 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>

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>

ソースファイルはこちら
 公式リファレンス

SNSでシェア