ドラッグアンドドロップで並べ替えるアプリ
以下のリストをドラッグアンドドロップで並べ替えることができます。
- りんご
- ばなな
- みかん
- グレープフルーツ
- パイナップル
以下が、ドラッグアンドドロップで並べ替えするアプリの実装例です。セキュリティ上の懸念に配慮し、evalや他サイトへの遷移・リダイレクトは行いません。また、alertも使用していません。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドラッグアンドドロップで並べ替えるアプリ</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #eee;
border: solid 1px #ccc;
padding: 10px;
margin-bottom: 5px;
cursor: move;
}
</style>
</head>
<body>
<h1>ドラッグアンドドロップで並べ替えるアプリ</h1>
<p>以下のリストをドラッグアンドドロップで並べ替えることができます。</p>
<ul id="sortable">
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
<li>グレープフルーツ</li>
<li>パイナップル</li>
</ul>
<script>
// ドラッグアンドドロップで並べ替える機能
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
</script>
</body>
</html>
```
ジョークとして、リストに「人間」「猫」「犬」「ラクダ」「シマウマ」などの動物を入れ、ドラッグアンドドロップして「どの動物が一番速いか」を競うゲームにする、というアレンジも考えられます。ただし、動物の速さに関する差異はジョークの範囲内であるため、現実での差異や人種差別などの不適切なジョークは避けるように注意してください。