使用jquery draggable / droppable和sortable创建新元素

时间:2012-01-25 23:34:40

标签: jquery jquery-ui jquery-ui-sortable

我要做的是创建卡片排序脚本。基本上,你有一个“卡片”列表,然后你应该排序成任意数量的“堆栈”(列表)。我正在使用jQuery-UI可排序插件,并且能够连接列表以在它们之间进行拖动。我面临的问题是,我无法找到一种方法来检查卡片是否悬停在空白区域或现有列表上,如果是前者,当我删除它时,创建一个新列表。

我尝试过使用draggable / droppable,这样卡片最初并不局限于可排序,但我仍然无法识别卡片的位置。我也认为draggable / droppable不会是我需要的,因为我无法将卡从可排序的版本移回原始列表(可拖动)。

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

有没有人有这样做的经验?任何帮助都会很棒!

2 个答案:

答案 0 :(得分:4)

很抱歉迟到的回复,但正在努力,并没有注意到其他答案。

我的变化与Goran相当。 http://jsfiddle.net/fordlover49/rxVPq/

请注意,您需要根据您想要的内容添加标题和其他所有内容,但它会在保留原始项目的同时完成基本目标,并且只有一组可排序列表的选项..

虽然Goran的解决方案似乎有效,但我会提醒您,他用来移动物体的方法既危险又不正确。如果您有关于移动到新列表的项目的任何事件绑定器,它们将会丢失,因为他已从DOM中删除了您具有事件绑定的旧项目。

答案 1 :(得分:0)

虽然如果拖动到屏幕的空白部分我无法弄清楚如何获取创建新堆栈的事件,我能做的最好的事情就是将卡片拖到new区域。

请参阅以下jsFiddle

该代码允许您将牌从牌组拖到现有堆栈或新堆栈,如果需要,还可以返回到牌组。如果在将项目拖动到新位置后保留为空,它还会删除堆栈(但不会删除堆栈)。

希望它有所帮助。