Question

我有几个动态生成的无序列表。其中的<li>是可拖动/可放置的元素，当放在那里时会被放入div中。

我希望能够将这些<li>返回到原始列表和相同的索引中，以便它们与之前的位置完全相同。

我通过以下方式实现了这一目标： -

使用.data函数拖动元素时如下：

$item.data('originalParent', $(this).prev());

然后当我使用这个返回元素时： -

.insertAfter( $item.data('originalParent') )

这当然很有效，但是当我将之前的<li>拖到droppable框中时会出现问题，因为该项目附加在该文本旁边，而不是在正确索引处的原始父项中。 / p>

我还能如何动态存储索引位置，以便我可以在正确的<ul>索引处将其返回到正确的父<li>？即使<li>中的<ul>元素数量发生了变化。

我希望这很清楚，因为我发现很难说清楚。

由于

Answer 1

嗯，你实际上希望我能以特定的方式对李进行分类。

你可以在添加li之后对它们进行排序，或者记住顺序（使用类似.data（＆＃39; index＆＃39;）来设置/检索索引）并将li放到适当的地方。

最后一部分可以通过迭代父母来完成。孩子们，把它放在第一个有更高指数的人面前，或者在最后。

Answer 2

gordyr扩展我的评论，因为如果你有像

这样的设置，这里更容易输入和显示示例

<ul list="1">
    <li list="1" item="1"></li>
    <li list="1" item="2"></li>
</ul>
<ul list="2">
    <li list="2" item="1"></li>
    <li list="2" item="2"></li>
</ul>

删除列表项后，您可以使用

抓取并存储其list和item属性

list =  $(this).attr('list');
item =  $(this).attr('item');
// store this list and item variable data with the div or parent of where ever the list item was dropped

当您想要将拖动的列表项重置回其来自的UL中的原始位置时，请阅读您使用它存储的列表和项变量，我们会说您抓住它们并将它们存储在{{1 }和list以及要恢复的li是item

要将列表项恢复到原始位置，您可以执行以下操作：

element

希望这对任何事都有帮助，我可能只是想做你想做的事情。上面的例子仍然需要扩展，就像最后一个，因为它只是返回列表中的一个项目，该项目也可以被移动，所以它不会在列表中，所以你必须继续迭代直到你找到列表中的下一个项目并在那之后插入它。

如果项目为4，则在列表中查找项目3，如果不存在，则查找2，如果不存在，则查找1，如果不存在则为1，则前置到列表的开头。

将可拖动的li返回到其原始索引

2 个答案: