Nestable 可移動拖拽的樹型結構的使用(jQuery)
阿新 • • 發佈：2019-02-13
利用jQuery可以製作出很好的樹型結構。這裡介紹一款最近才找到使用的Nestable
精簡後的例項：
<?php if($_POST['tree_data']) { echo '==>'.$_POST['tree_data'].'<pre>'; print_r(json_decode($_POST['tree_data'])); echo '</pre>'; die; } ?> <style type="text/css"> /** * Nestable */ .nestable { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; 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-empty, .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; color: #333; 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, .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; } .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5; background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-size: 60px 60px; background-position: 0 0, 30px 30px; } .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); } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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')));//, null, 2)); else output.val('JSON browser support required for this demo.'); }; // activate Nestable for list 1 $('#nestable').nestable({ group: 1 }).on('change', updateOutput); // output initial serialised data updateOutput($('#nestable').data('output', $('#nestable-output'))); $('#nestable-menu').on('click', function(e) { var target = $(e.target), action = target.data('action'); if (action === 'expand-all') $('.nestable').nestable('expandAll'); if (action === 'collapse-all') $('.nestable').nestable('collapseAll'); }); }); </script> </head> <body> <menu id="nestable-menu"> <button type="button" data-action="expand-all">Expand All</button> <button type="button" data-action="collapse-all">Collapse All</button> </menu> <div class="cf nestable-lists"> <div class="dd nestable" id="nestable"> <ol class="dd-list"> <li class="dd-item" data-id="1"> <div class="dd-handle">Item 1</div> </li> <li class="dd-item" data-id="2"> <div class="dd-handle">Item 2</div> <ol class="dd-list"> <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li> <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li> <li class="dd-item" data-id="5"> <div class="dd-handle">Item 5</div> <ol class="dd-list"> <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li> <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li> <li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li> </ol> </li> <li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li> <li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li> </ol> </li> <li class="dd-item" data-id="11"> <div class="dd-handle">Item 11</div> </li> <li class="dd-item" data-id="12"> <div class="dd-handle">Item 12</div> </li> </ol> </div> </div> <p><strong>Serialised Output (per list)</strong></p> <form method="post"> <textarea id="nestable-output" name="tree_data" style="width:400px;height:240px;"></textarea> <input type="submit" /> </form>