たとえばリストに5人の名前が入っていて、うち3位までが入賞するような状況があったとして、
1. Aさん
2. Bさん
3. Cさん
---- ここまで入賞 ----
4. Dさん
5. Eさん
このように、3位と4位の間に区切りを入れたいのです。
文法を気にしない人向け。(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>
追記しました。
2012/02/24 19:18:16ソート後updateイベントが起きた時に移動するようにしたので確認してみてください。
なるほど。updateイベントで変更されたのを検出されたら要素を移動させるんですね。
2012/02/26 22:49:00jQuery使いこなしている感がステキです!ありがとうございます!