使用jquery Dragable/Dropable和sortable创建新元素

我要做的是创建一个卡片排序脚本。基本上，您有一个“卡片”列表，然后您应该将其排序为任意数量的“堆栈”（列表）。我使用jQueryUISortable插件，能够连接列表在它们之间拖动。我面临的问题是，我无法找到一种方法来让它检查卡片是否悬停在空白处或现有列表上，以及在我放下卡片时，前者是否创建了一个新列表

我尝试过使用Dragable/Dropable，这样卡最初就不局限于可排序，但我仍然无法让它识别卡的位置。我还认为Dragable/Dropable不是我需要的，因为这样我就无法将卡片从可排序列表移回原始列表（Dragable）

最终，我将使用jQuery的ajax功能来保存排序结果，但在我能够让它创建新列表之前，我不能这样做

---

有没有人有这样做的经验？任何帮助都会很好

虽然我不知道如果拖到屏幕的空白部分，如何获取创建新堆栈的事件，但我能做的最好的方法是将卡片拖到

新的

区域

见下文

该代码允许您将卡从牌组拖动到现有的牌组或新的牌组，如果需要，还可以将卡拖回牌组。如果将项目拖到新位置后仍为空，它还会移除堆栈（但不会移除甲板）

---

希望有帮助。

虽然我不知道如果拖到屏幕的空白部分，如何获取创建新堆栈的事件，但我能做的最好的方法是将卡片拖到

新的

区域

见下文

该代码允许您将卡从牌组拖动到现有的牌组或新的牌组，如果需要，还可以将卡拖回牌组。如果将项目拖到新位置后仍为空，它还会移除堆栈（但不会移除甲板）

---

希望能有所帮助。

很抱歉回复太晚，但正在处理，没有注意到其他答案

我的变体做的事情与戈兰的相当

请注意，您仍然需要根据需要添加标题和其他所有内容，但它实现了基本目标，同时保留了原始项目，并且对于可排序列表只有一组选项

---

虽然戈兰的解决方案似乎有效，但我要提醒你，他用来移动物体的方法是危险和不正确的。如果您在移动到新列表的项目上有任何事件绑定，它们将丢失，因为他已从DOM中删除了您有事件绑定的旧项目。

很抱歉响应太晚，但正在处理，没有注意到其他答案

我的变体做的事情与戈兰的相当

请注意，您仍然需要根据需要添加标题和其他所有内容，但它实现了基本目标，同时保留了原始项目，并且对于可排序列表只有一组选项

---

虽然戈兰的解决方案似乎有效，但我要提醒你，他用来移动物体的方法是危险和不正确的。如果您在移动到新列表的项上有任何事件绑定，它们将丢失，因为他已从DOM中删除了您有事件绑定的旧项。

也许可以准备一份您目前拥有的JSFIDEL？当问更复杂的问题时，通常需要相当长的时间为回答问题的人从头开始编写一个示例。这是一个很好的工具。这是我想到的。请原谅我的丑陋，请注意，我已经尝试了比现在更多的其他事情。目前，初始列表是一个可排序的列表，可以通过单击原始列表下显示的+链接添加新的“堆栈”，并且原始列表中的项目可以在它和创建的排序表之间移动。也许准备一份到目前为止你所拥有的东西？当问更复杂的问题时，通常需要相当长的时间为回答问题的人从头开始编写一个示例。这是一个很好的工具。这是我想到的。请原谅我的丑陋，请注意，我已经尝试了比现在更多的其他事情。目前，初始列表是一个可排序的列表，可以通过单击原始列表下显示的+链接添加新的“堆栈”，并且原始列表中的项目可以在它和创建的排序表之间移动。这绝对是一个可行的方法，谢谢你花时间这么做。我会看看是否能将你的解决方案应用到我现有的解决方案中，我会让你知道它是如何工作的。我会将此标记为已解决。我已经能够实施您的解决方案，动态创建新的“堆栈”。虽然这不是我想象的那样，但效果很好。非常感谢！这种方法非常危险，因为您要从DOM中删除原始项并重新创建它。这样做会丢失该元素以前可能存在的任何事件绑定。@PriorityMark-Fixed，只是一行代码。深夜编码显然不是我的专长。@goranmotram我知道那种感觉；）。这绝对是一个可行的方法，谢谢你花时间这么做。我会看看是否能将你的解决方案应用到我现有的解决方案中，我会让你知道它是如何工作的。我会将此标记为已解决。我已经能够实施您的解决方案，动态创建新的“堆栈”。虽然这不是我想象的那样，但效果很好。非常感谢！这种方法非常危险，因为您要从DOM中删除原始项并重新创建它。这样做会丢失该元素以前可能存在的任何事件绑定。@PriorityMark-Fixed，只是一行代码。深夜编码