人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQuery UIのsortableで、リストに区切りを入れる方法を教えてください。

たとえばリストに5人の名前が入っていて、うち3位までが入賞するような状況があったとして、

1. Aさん
2. Bさん
3. Cさん
---- ここまで入賞 ----
4. Dさん
5. Eさん

このように、3位と4位の間に区切りを入れたいのです。


●質問者: pekeq
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●500ポイント ベストアンサー

文法を気にしない人向け。(ol直下にspan)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Include / exclude items</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
 .separator { margin-left: -20px; }
</style>
<script>
$(function() {
$("#sortable").sortable({
cancel: ".separator",
update: function(event, ui) {
$(this).find('.separator').insertAfter($('li:eq(2)', this))
}
});

$("#sortable li, .separator").disableSelection();
});
</script>
</head>
<body>
<div class="demo">
<ol id="sortable">
<li class="ui-state-default">Aさん</li>
<li class="ui-state-default">Bさん</li>
<li class="ui-state-default">Cさん</li>
<span class="separator">---- ここまで入賞 ----</span>
<li class="ui-state-default">Dさん</li>
<li class="ui-state-default">Eさん</li>
</ol>
</div>
</body>
</html>

参考

Cherenkovさんのコメント
元々のHTMLのコードがあると回答しやすいと思います。 リストの「1.」「2.」?はolによる表示ですよね?

pekeqさんのコメント
ありがとうございます! でも書き忘れていた要件があって(ごめんなさい)、区切りは常時3位と4位の間に入れたいのです。 頂いたスクリプトだと、要素を入れ替えると区切りも動いてしまうのですが、そこを固定するにはどうしたらよいものでしょうか。 たとえば、質問文の状態からDさんを一番上に持って行ったら、以下のような状態にしたいのです。 >|| 1. Dさん 2. Aさん 3. Bさん ---- ここまで入賞 ---- 4. Cさん 5. Eさん ||<

Cherenkovさんのコメント
追記しました。 ソート後updateイベントが起きた時に移動するようにしたので確認してみてください。

pekeqさんのコメント
なるほど。updateイベントで変更されたのを検出されたら要素を移動させるんですね。 jQuery使いこなしている感がステキです!ありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ