使用 jQuery 可排序时如何保留原始列表项

Posted 2023-05-08

【中文标题】使用 jQuery 可排序时如何保留原始列表项

【英文标题】：How to keep original list items in place when using jQuery sortable

【发布时间】：2016-03-15 04:12:20

【问题描述】：

我的JSFiddle located here

我正在使用可排序的 jQuery 函数来对 3 列进行排序。我想这样做，以便从第 2 列或第 3 列中抓取一个名称并将其放置在第 1 列中，第 2 列和第 3 列中的名称保持当前状态，以便该列保持字母顺序和相同的高度。我希望我能正确解释这一点。换句话说，我想从 2 或 3 中获取一个名称，将其放在 1 中，并且名称仍在 2 或 3 中。

【问题讨论】：

你有任何javascript要添加到jsfiddle吗？

奇怪。我做了，它在那里，但它没有保存。

@csum 现在应该可以工作了。在 JSFiddl 的最新更新之前，我从未遇到过这个问题。感谢收看！

您是否找到任何其他带有复制元素（而不是移动）示例的 SO 帖子？看来您可以这样做，并禁用第 2 列和第 3 列中的排序以保留它们的顺序。

@csum 我找不到任何符合我需要的东西。当谈到 jQuery 时，我是一个完全的初学者，所以它把我搞糊涂了。

【参考方案1】：

https://***.com/a/12659113/3495594 应该有助于克隆元素。我只对解决方案进行了一点调整以适合您的情况：http://jsfiddle.net/4oaanxoq/2/。

我将 ul 设置为 id 为 sortable1、sortable2 和 sortable3。第一个类为destinationList，其他类为sourceList。

CSS 中还有.sourceList .source-placeholder display: none !important; ，您可能想使用也可能不想使用。

请注意，它不会阻止对第 2 列和第 3 列中的项目进行重新排序，因此您仍然需要针对该部分的解决方案。看看sortable api中的事件。

【讨论】：

太棒了，谢谢你！它肯定让我朝着正确的方向前进。现在我只需要弄清楚当一个名字被放置在一个位置时如何保留我的数字，然后我可以从第 1 列中删除名字。你摇滚@csum。