jQuery Sortable
入れ子(ネスト)になったリストが、
ドラッグ&ドロップで並び替えできるjQueryプラグイン

右の入れ子(ネスト)になったリストは、ドラッグ&ドロップで並び替えできます。

親要素と子要素を入れ替えたり、親子をまとめて移動したりと、柔軟に操作できます。

jQuery UI Sortableではなく、Jonas von Andrian氏が開発した独自のjQueryプラグイン「jQuery Sortable」です。

jQuery Sortable 公式ページ

やってみる

導入方法

設定するのは、次の3つ。

css

<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;
}

html

リストは、こんな感じで記述する。

<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>

Javascript

<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>

Example

exampleのソースコードは、こちらを参照ください。

Show case


Copyright 2015 Yutaka Kachi All Rights Reserved released under CC-BY or MIT License.