0
nestedSortable當試圖在其網站上提供的示例中使用它時，jQuery插件無法正常工作。嵌套排序不能摺疊/正確擴展
拖放工程，但當我需要崩潰/展開問題發生。我使用了另一個問題中提出的解決方案，雖然它適用於兩個級別的列表，但它不適用於3個或更多級別。
例：點擊第二級元件（Sub Item 3.2）上，而不是擴展它之後，第一級元件（Item 2）被關閉。
我正在尋找一個解決方案，與3個或更多級別的作品。
https://jsfiddle.net/vs535823/
$('ol.sortable').nestedSortable({
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
maxLevels: 3,
isTree: true,
expandOnHover: 700,
startCollapsed: true
});
//The following has to be added, collapse/expand still doesn't work properly
$('.mjs-nestedSortable-collapsed').on('click', function() {
$(this).toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
});
$('.mjs-nestedSortable-expanded').on('click', function() {
$(this).toggleClass('mjs-nestedSortable-expanded').toggleClass('mjs-nestedSortable-collapsed');
});ol.sortable, ol.sortable ol {
\t margin: 0 0 0 25px;
\t padding: 0;
\t list-style-type: none;
}
ol.sortable {
\t margin: 4em 0;
}
.sortable li {
\t margin: 5px 0 0 0;
\t padding: 0;
}
.sortable li div {
\t border: 1px solid #d4d4d4;
\t -webkit-border-radius: 3px;
\t -moz-border-radius: 3px;
\t border-radius: 3px;
\t border-color: #D4D4D4 #D4D4D4 #BCBCBC;
\t padding: 6px;
\t margin: 0;
\t cursor: move;
\t background: #f6f6f6;
\t background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),
\t \t color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
\t background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
\t background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
\t background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
\t background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
\t filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
\t \t endColorstr='#ededed', GradientType=0);
}
.sortable li.mjs-nestedSortable-branch div {
\t background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #f0ece9 100%);
\t background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #f0ece9 100%);
}
.sortable li.mjs-nestedSortable-leaf div {
\t background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #bcccbc 100%);
\t background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #bcccbc 100%);
}
.sortable li.mjs-nestedSortable-collapsed>ol {
\t display: none;
}
.sortable li.mjs-nestedSortable-branch>div>.disclose {
\t display: inline-block;
}
.sortable li.mjs-nestedSortable-collapsed>div>.disclose>span:before {
\t content: '+ ';
}
.sortable li.mjs-nestedSortable-expanded>div>.disclose>span:before {
\t content: '- ';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdn.rawgit.com/mjsarfatti/nestedSortable/master/jquery.mjs.nestedSortable.js"></script>
<ol id="first" class="sortable ui-sortable">
<li id="list_4" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded">
<div><span class="disclose"><span></span></span>Item 2</div>
<ol>
<li id="list_7" class="mjs-nestedSortable-branch mjs-nestedSortable-collapsed" style="display: list-item;">
<div><span class="disclose"><span></span></span>Sub Item 3.2</div>
<ol>
<li id="list_8" class="mjs-nestedSortable-leaf">
<div><span class="disclose"><span></span></span>Sub Item 3.2.1</div>
</li>
</ol>
</li>
<li id="list_2" class="mjs-nestedSortable-leaf" style="display: list-item;">
<div><span class="disclose"><span></span></span>Sub Item 1.1</div>
</li>
</ol>
</li>
<li id="list_1" class="mjs-nestedSortable-leaf" style="display: list-item;">
<div><span class="disclose"><span></span></span>Item 1</div>
</li>
<li id="list_3" class="mjs-nestedSortable-leaf" style="display: list-item;">
<div><span class="disclose"><span></span></span>Sub Item 1.2</div>
</li>
<li id="list_5" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded">
<div><span class="disclose"><span></span></span>Item 3</div>
<ol>
<li id="list_6" class="mjs-nestedSortable-no-nesting mjs-nestedSortable-leaf">
<div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)</div>
</li>
</ol>
</li>
</ol>