Jquery 从多个列表拖放到另一个（可排序的）列表

Question

我正在尝试创建一个基于 Jquery 的 Playlist Assembler。
播放列表将通过从多个列表中拖放项目来创建 - 每个列表用于不同的类别。

这些是我想要实现的目标：

• 类别列表中的每个项目都有一个按钮，可将其添加到播放列表的末尾，并将其从原始列表中删除。
• 新播放列表中的每个项目都有一个按钮，可将其从播放列表中删除并将其放回其原始列表中的原始位置，但是如果原始列表中的项目也被移动，则删除的项目将被放置根据所做的更改 -（见下图）如果将类别 3 中的项目 2 添加到播放列表中，然后类别 3 中的项目 3（现在正在图像中拖动）是从播放列表中删除 - 项目 3 将放置在类别 3 的项目 1 和项目 4 之间。
• 项目将能够包含数据（项目的持续时间、项目的来源等）。
• 播放列表中的项目将是可排序的。
• 播放列表中不在的项目将不可排序。
• 删除占位符 - 将项目拖到播放列表时，其中的其他项目将通过移动为该项目腾出空间以允许它们之间的空白。 （喜欢here）

Here is what I have in mind (Pretty much...)

我在网上找到了很多 Drag and Drop Jquery 插件，但没有一个能够让我组合我想要实现的所有功能。
我真的不知道从哪里开始，所以我非常感谢您的帮助和建议！

Answer 1

我认为您应该探索一些 HTML5 画布库，例如 KineticJS、EaselJS...，然后为您的项目选择一个。使用库可以节省大量时间。