README

nestedSortable 是一个 jQuery 插件，它扩展了 jQuery Sortable UI 的功能，使其能够对嵌套列表进行排序。
注意：2.0 版本已发布在 '2.0alpha' 分支上，并可进行测试。目前仅在 Firefox 和 Chrome 中进行了测试，如果您使用 IE，请随意尝试并告知我是否有任何问题。

2.0 版本的新功能

最大的变化是您的嵌套列表现在可以像树一样具有展开/折叠功能。只需在选项中将 isTree 设置为 true 即可！查看演示了解嵌套 Sortable 和一些 CSS 可以做到什么程度。（注意，nestedSortable 所做的只是动态分配/删除类）
此外

isAllowed 函数最终按预期工作，请参阅下面的文档
修复：在 protectRoot 函数中存在的一个小错误
更改：如果尝试将一个带有 no-nesting 类的元素下的项目嵌套到另一个元素中，则不会出现任何拖放区域。
添加：防止插件删除空列表的 doNotClear 选项

特性

设计用于无缝地与嵌套的集合模型（查看 toArray 方法）一起工作
项目可以在自己的列表中进行排序，在树中进行移动，或嵌套在其他项目下。
子列表将动态创建和删除
所有 jQuery Sortable 选项、事件和方法都可用
可以定义不允许接受新嵌套项目/列表的元素以及嵌套项目的最大深度
根级别可以受到保护

用法

<ol class="sortable">
	<li><div>Some content</div></li>
	<li>
		<div>Some content</div>
		<ol>
			<li><div>Some sub-item content</div></li>
			<li><div>Some sub-item content</div></li>
		</ol>
	</li>
	<li><div>Some content</div></li>
</ol>

	$(document).ready(function(){

		$('.sortable').nestedSortable({
			handle: 'div',
			items: 'li',
			toleranceElement: '> div'
		});

	});

请注意：每个 <li> 必须有一个或两个直接子元素，第一个是一个容器元素（如上述示例中的 <div>），第二个（可选）是嵌套列表。容器元素必须在选项中设置为 'toleranceElement'，并且这个或其子元素之一必须是 'handle'。

此外，默认列表类型是 <ol>。

这是 nestedSortable 工作的基本要求。查看演示了解更多可以完成的事情。

自定义选项

doNotClear (2.0): 将其设置为 true 如果您不想删除空列表。默认值：false
expandOnHover (2.0): 等待多长时间（以毫秒为单位）以展开折叠的节点（仅当 isTree: true 时有用）。默认值：700
isAllowed (函数): 您可以指定一个自定义函数来验证是否允许放置位置。默认值：function (placeholder, placeholderParent, currentItem) { return true; }
isTree (2.0): 将其设置为 true 如果您想使用新的树功能。默认值：false
listType: 使用的列表类型（有序或无序列表）。默认值：ol
maxLevels: 列表可以接受的嵌套项目的最大深度。如果设置为 '0'，则层级无限。默认值：0
protectRoot: 是否保护根级别（即根项可以进行排序但不能嵌套，子项不能成为根项）。默认值：false
rootID: 分配给根元素的id（设置为你数据结构所需的内容）。默认：null
rtl: 如果你有一个从右到左的页面，将其设置为true。默认：false
startCollapsed (2.0): 如果你想插件在页面加载时折叠树，将其设置为true。默认：false
tabSize: 项目在嵌套或从当前列表中移出时，必须向右或向左移动的距离（以像素为单位）。默认：20

自定义类（你将在选项中设置它们）

branchClass (2.0): 分配给所有有子项的项目。默认：mjs-nestedSortable-branch
collapsedClass (2.0): 分配给已折叠的分支。当悬停超过 expandOnHover 毫秒时，它将切换到 expandedClass。默认：mjs-nestedSortable-collapsed
disableNestingClass: 分配给不接受子项的项目。默认：mjs-nestedSortable-no-nesting
errorClass: 在发生错误时分配给占位符。默认：mjs-nestedSortable-error
expandedClass (2.0): 分配给展开的分支。默认：mjs-nestedSortable-expanded
hoveringClass (2.0): 在拖动项目经过它们时分配给已折叠的分支。默认：mjs-nestedSortable-hovering
leafClass (2.0)
: 分配给没有子项的项目。默认：mjs-nestedSortable-leaf

自定义方法

serialize

将嵌套列表序列化为字符串，如 setName[item1Id]=parentId&setName[item2Id]=parentId，从每个项目的id格式化为 'setName_itemId'（其中itemId是一个数字）。它接受与原始 Sortable 方法相同的选项（key、attribute 和 expression）。

toArray

构建一个数组，其中每个元素的形式为

setName[n] =>
{
	'item_id': itemId,
	'parent_id': parentId,
	'depth': depth,
	'left': left,
	'right': right,
}

它接受与原始 Sortable 方法相同的选项（attribute 和 expression）以及自定义的 startDepthCount，该选项设置起始深度数（默认为 0）。

toHierarchy

构建一个形式为的层次对象

'0' ...
	'id' => itemId
'1' ...
	'id' => itemId
	'children' ...
		'0' ...
			'id' => itemId
		'1' ...
			'id' => itemId
'2' ...
	'id' => itemId

类似于 toArray，它接受 attribute 和 expression 选项。

已知的错误

nestedSortable 因为 Draggable 模拟 Sortable 的 mouseStart 和 mouseStop 事件的方式，所以不能很好地与连接的拖动对象一起工作。这个错误可能在未来的某个时候被修复（这并不是特定于这个插件的）。

需求

jQuery UI Sortable 1.10+（可能与1.9一起工作，但未测试）

浏览器兼容性

已测试：Firefox、Chrome
注意：这仍然是一个alpha版本，请在目标IE版本中彻底测试

许可

本作品根据MIT许可证授权。
这意味着你可以做几乎所有你想做的事情。

尽管如此，如果这个插件为你节省了金钱，节省了时间，或者拯救了你的生命，请花点时间想想我为你们所做的工作，并考虑与我分享一点你的快乐。你的捐赠，无论大小，都将受到极大的赞赏。
谢谢。

通过PayPal捐赠

pan / ui-nested-sortable

维护者

详细信息