jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にする方法｜DAD UNION

jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にし、あわせてliタグのdata-id値をjson形式で出力するをご紹介します。

Contents

jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするCSS記述
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするHTML記述
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするJavaScriptの記述
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするデモページ
ソース元：Nestable

jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするCSS記述

※liタグ一覧エリア（.nestable-lists）、json形式の出力エリア（#nestable-output）のCSS記述です。必要に応じて変更して下さい。

<style>
body {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.8em;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0;
}

.cf:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .cf {
  zoom: 1;
}
*:first-child+html .cf {
  zoom: 1;
}

/**
 * Nestable
 */
.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}
.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dd-list .dd-list {
  padding-left: 30px;
}
.dd-collapsed .dd-list {
  display: none;
}
.dd-item, .dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
}
.dd-handle {
  display: block;
  height: 30px;
  margin: 5px 0;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  background: #fafafa;
  background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
  background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
  background:         linear-gradient(top, #fafafa 0%, #eee 100%);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd-handle:hover {
  color: #2ea8e5;
  background: #fff;
}
.dd-item > button {
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 25px;
  height: 20px;
  margin: 5px 0;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  font-weight: bold;
}
.dd-item > button:before {
  content: '+';
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  text-indent: 0;
}
.dd-item > button[data-action="collapse"]:before {
  content: '-';
}
.dd-placeholder {
  margin: 5px 0;
  padding: 0;
  min-height: 30px;
  background: #f2fbff;
  border: 1px dashed #b6bcbf;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd-dragel {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}
.dd-dragel > .dd-item .dd-handle {
  margin-top: 0;
}
.dd-dragel .dd-handle {
  -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
  box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}

/**
 * Nestable Extras
 */
.nestable-lists {
  display: block;
  clear: both;
  padding: 30px 15px;
  width: 60%;
  border: 2px solid #ddd;
  margin: 0 auto;
}
#nestable-menu {
  padding: 0;
  margin: 20px 0;
}
#nestable-output{
  width: 70%;
  line-height: 1.4em;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.dd-hover > .dd-handle {
  background: #2ea8e5 !important;
}
</style>

jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするHTML記述

※liタグ一覧エリア（class=”nestable-lists”）、json形式の出力エリア（id=”nestable-output”）、liタグ一覧を展開・折りたたむボタン（id=”nestable-menu”）を用意します。

<h1>jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にします。<br>あわせて、liタグのdata-id値をjson形式で出力します。</h1>

    <menu id="nestable-menu">
        <button type="button" data-action="expand-all">全て展開</button>
        <button type="button" data-action="collapse-all">折りたたむ</button>
    </menu>

    <div class="cf nestable-lists">

        <div class="dd" id="nestable">
            <ol class="dd-list">
                <li class="dd-item" data-id="1">
                    <div class="dd-handle">アイテム1</div>
                </li>
                <li class="dd-item" data-id="2">
                    <div class="dd-handle">アイテム2</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="3"><div class="dd-handle">アイテム3</div></li>
                        <li class="dd-item" data-id="4"><div class="dd-handle">アイテム4</div></li>
                        <li class="dd-item" data-id="5">
                            <div class="dd-handle">アイテム5</div>
                            <ol class="dd-list">
                                <li class="dd-item" data-id="6"><div class="dd-handle">アイテム6</div></li>
                                <li class="dd-item" data-id="7"><div class="dd-handle">アイテム7</div></li>
                                <li class="dd-item" data-id="8"><div class="dd-handle">アイテム8</div></li>
                            </ol>
                        </li>
                        <li class="dd-item" data-id="9"><div class="dd-handle">アイテム9</div></li>
                        <li class="dd-item" data-id="10"><div class="dd-handle">アイテム10</div></li>
                    </ol>
                </li>
                <li class="dd-item" data-id="11">
                    <div class="dd-handle">アイテム11</div>
                </li>
                <li class="dd-item" data-id="12">
                    <div class="dd-handle">アイテム12</div>
                </li>
            </ol>
        </div>

    </div><!--/.nestable-lists-->

<br>
<br>
<div align="center">liタグのdata-idの出力結果<br>上記liタグをドラッグすると以下の出力結果順も変わります。</div>
<textarea id="nestable-output"></textarea>

jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするJavaScriptの記述

※jquery-3.1.1.min.js、jquery.nestable.jsファイルを読み込みます。$(‘liタグ一覧エリア’).nestable({グループ数})でNestableプラグインをアクティブにし、「初期のシリアル化されたデータを出力」コメント箇所ではliタグのdata-id値をjson形式で出力します。$(‘展開・折りたたむボタン’).on(‘click’,～でネストしたliタグ一覧を展開・折りたたむ処理を記述してます。

<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.nestable.js"></script>
<script>
$(document).ready(function()
{
    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));
        } else {
            output.val('このデモには、JSON ブラウザーのサポートが必要です。');
        }
    };

    // Nestableをアクティブ
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // 初期のシリアル化されたデータを出力
    updateOutput($('#nestable').data('output', $('#nestable-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });
});
</script>