我正在使用这个插件: http://mjsarfatti.com/sandbox/nestedSortable/
这似乎很棒,只是为默认的jQueryUI sortable添加了一些额外的选项(https://github.com/mjsarfatti/nestedSortable - 虽然不适用于1.9+)。
但是我似乎有一个问题,你可以从这个小提琴中看到:http://jsfiddle.net/kzswp/6/似乎导致所有嵌套列表项被计为最根项目下的一个大项目。
此外,如果将其中一个根项目拖动为另一个根项目的子项目,则排序字符不一致。即使我尝试将项目设置为已存在的嵌套列表中的子项目,它似乎也会创建一个新列表来放置该项目。
这是我的标记:
<ol type="I" id="top-level-list">
<li>
<h3>Category #1</h3>
<div class="child-items">
<ol type="A">
<li>
<div class="form-row" >
<div class="form-item">Question #1</div>
</div>
<div class="child-items">
<ol type="1">
<li>
<div class="required-parent-response c7ad1cdb-e727-4fb7-b0eb-0f04382dcd86">
<div class="form-row" >
<div class="form-item">Some other question</div>
</div>
</div>
</li>
<li>
<div class="required-parent-response c7ad1cdb-e727-4fb7-b0eb-0f04382dcd86">
<div class="form-row" >
<div class="form-item">Branch Question - under Question #1</div>
</div>
</div>
</li>
</ol>
</div>
</li>
</ol>
</div>
</li>
<li>
<h3>Category #2</h3>
<div class="child-items">
<ol type="A">
<li>
<div class="form-row" >
<div class="form-item">Category #2 - question 1</div>
</div>
</li>
</ol>
</div>
</li>
我认为问题是围绕嵌套列表的<div class="child-items">
(我需要在页面上为其他JS提供此功能),但即使在删除它之后:http://jsfiddle.net/xJzZU/1/
这只能修复排序字符,但所有子列表及其项目仍然算作一个大项目。
任何人都知道如何解决这个问题,同时保持围绕这些嵌套元素的child-items
div?
答案 0 :(得分:2)
首先,您应该在选项中添加items
和toleranceElement
。像这样:
$("#top-level-list").nestedSortable({
//handle: ".ui-icon",
maxLevels: 3,
placeholder: "placeholder",
help: "clone",
revert: 300,
opacity: .6,
forcePlaceholderSize: true,
tabSize: 40,
items: 'li',
toleranceElement: '> *'
});
其次,遗憾的是,额外的<div class="child-items">
无法真正与 nestedSortable 配合使用:/
这是因为插件期望ol
和li
处于直接的父子关系中...如docs中所述,每个列表项必须具有一个或两个子项,其中一个是toleranceElement,另一个是嵌套列表。