jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にし、あわせてliタグのdata-id値をjson形式で出力するをご紹介します。
Contents
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>
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするデモページ
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするデモページ
ソース元：Nestable
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告
