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

我正在尝试创建一个基于Jquery的播放列表汇编程序。
播放列表将通过将多个列表中的项目拖放到其中来创建，每个列表针对不同的类别

以下是我想要实现的目标：

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

我在web上找到了许多拖放式Jquery插件，但没有一个能够让我组合所有我想要实现的功能。

---

我真的不知道从哪里开始，所以我非常感谢你的帮助和建议

我认为你应该探索一些HTML5画布库，比如KineticJS、EaselJS。。。然后为您的项目选择一个。使用图书馆可以节省很多时间