ドラッグアンドドロップで並べ替えるアプリ
ユーザーが指定した文字列を表示し、ドラッグアンドドロップで並べ替えます。
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
以下が実際のプログラム例です。jQuery UIのsortableを使用して、ドラッグアンドドロップで並べ替えを実装しています。また、ユーザーが指定した文字列を表示し、並べ替えを行う機能を持っています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ドラッグアンドドロップで並べ替えるアプリ</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
</style>
</head>
<body>
<h1>ドラッグアンドドロップで並べ替えるアプリ</h1>
<p>ユーザーが指定した文字列を表示し、ドラッグアンドドロップで並べ替えます。</p>
<p id="inputArea">
<label for="inputString">文字列を入力して下さい</label><br>
<input type="text" id="inputString">
<button id="addButton">追加</button>
</p>
<ul id="sortable">
<li class="ui-state-default">項目1</li>
<li class="ui-state-default">項目2</li>
<li class="ui-state-default">項目3</li>
<li class="ui-state-default">項目4</li>
<li class="ui-state-default">項目5</li>
</ul>
<script>
// 追加ボタンがクリックされた時の処理
$("#addButton").click(function(){
var inputVal = $("#inputString").val();
if(inputVal){
$("#sortable").append("<li class='ui-state-default'>" + inputVal + "</li>");
$("#inputString").val("");
}
});
// ドラッグアンドドロップの処理
$("#sortable").sortable({
update: function(){
var itemList = $("#sortable").sortable("toArray");
var resultStr = "";
for(var i=0; i<itemList.length; i++){
resultStr += (i+1) + "：" + $("#" + itemList[i]).text() + "<br>";
}
$("#outputArea").html(resultStr);
}
});
</script>
<p id="outputArea"></p>
</body>
</html>
```
ジョークとして、並べ替え完成後には「さあ、もう一度並べ替えてみよう！」と表示すると楽しいかもしれません。