右の入れ子(ネスト)になったリストは、ドラッグ&ドロップで並び替えできます。
親要素と子要素を入れ替えたり、親子をまとめて移動したりと、柔軟に操作できます。
jQuery UI Sortableではなく、Jonas von Andrian氏が開発した独自のjQueryプラグイン「jQuery Sortable」です。
設定するのは、次の3つ。
<link rel="stylesheet" type="text/css" href="jquery-sortable.css" media="all" />
jquery-sortable.cssの中身は、こんな感じ。
body.dragging, body.dragging * { cursor: move !important; } .dragged { position: absolute; opacity: 0.5; z-index: 2000; } ul.block li{ cursor: move; list-style: none; margin: 4px 4px 4px 4px; padding: 2px 4px 4px 4px; font-size: 12px; font-weight: bold; line-height: 1.4; word-spacing: 0.3em; border: 2px solid white; background-color: #7f8c8d; /* Asbestos */ color: White; border-radius: 4px; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; transition: border .25s linear, color .25s linear, background-color .25s linear; -webkit-font-smoothing: subpixel-antialiased; } ul.block li.placeholder { position: relative; } ul.block li.placeholder:before { position: absolute; content: ""; width: 0; height: 0; margin-top: -8px; left: -8px; top: -1px; border: 8px solid transparent; border-left-color: red; border-right: none; z-index: 2000; }
リストは、こんな感じで記述する。
<ul class='example block'> <li>りんご</li> <li>バナナ</li> <li> <ul> <li>ストロベリー</li> <li>ブルーベリー</li> <li>ブラックベリー</li> </ul> </li> <li> <ul> <li>みかん</li> <li>夏みかん</li> <li>ぽんかん</li> </ul> </li> </ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src='js/jquery-sortable.js'></script> <script type="text/javascript"> $(function () { $("ul.example").sortable(); }); </script>
Copyright 2015 Yutaka Kachi All Rights Reserved released under CC-BY or MIT License.