684 views
ソートリストのサンプル
htmlのコード
<html>
<head>
<meta charset="utf-8" />
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="main.js"></script>
<title>こんにちわ</title>
<style type="text/css">
ul { list-style: none; margin:0; padding:0; }
li { background:#727ea3; color:#fff; width:100px; margin:5px; padding:3px; list-style:none; }
</style>
</head>
<body>
<p id="msg">ここをクリック</p>
<ul id="myList">
<li id="hello">Hello</li>
<li id="goodbye">good bye</li>
</ul>
</body>
</html>
main.jsの内容。
$(function(){
$("#myList").sortable({
update:function(){
var result = $(this).sortable("toArray");
console.log(result);
}
});
});
Page 8 of 8.
[添付ファイル]
お問い合わせ
プロフィール
すぺぺぺ
自己紹介
本サイトの作成者。
プログラムは趣味と勉強を兼ねて、のんびり本サイトを作っています。
フレームワークはdjango。
ChatGPTで自動プログラム作成に取り組み中。
サイト/ブログ
https://www.osumoi-stdio.com/novel/
