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


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

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

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

回答の条件
  • 1人5回まで
  • 登録:2012/02/24 02:42:32
  • 終了:2012/02/26 22:49:53

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/02/24 04:01:01

ポイント500pt

文法を気にしない人向け。(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>

参考
他2件のコメントを見る
id:Cherenkov

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

2012/02/24 19:18:16
id:pekeq

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

2012/02/26 22:49:00

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • [人力]うごめもらーが湧いてきた あいまいもこ 2012-02-24 21:52:09
    http://q.hatena.ne.jp/1330053052 とか。 http://q.hatena.ne.jp/1330018948 とか。 僕のところにも。 なんなんでしょうね。 挙句の果てには id:fhtdd うーん?よく分からないですけど… とりあえずポイント貰
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません