Jquery 制作一个幻灯片放映照片库，可以拖放新照片

我需要创建一个幻灯片照片库，但有能力拖动一个新的照片到画廊，并显示在幻灯片中

我该怎么做

HTML:

<div id="gallery">
    <img src="http://html.net/tutorials/javascript/images/1.jpg" alt="Photo gallery image" id="photo" />

    <input type="button" id="btnStart" value="Restart gallery" />
    <input type="button" id="btnStop" value="Stop gallery" />
</div>

---

完整的图片集是：

这个问题太广泛了

你能告诉我们你正在使用的后端吗？（例如rails/PHP）如果您希望在页面加载后将拖动到图库中的图像持久化，则需要某种后端系统来存储信息

您希望从何处拖动图像？（例如，互联网/您的桌面/同一页面上的图像列表）这将最终决定如何着手解决问题

图像将显示在哪里？（例如，在您网站的其他地方/就在同一页面上）如上所述，可以使用类似Knockout.js的东西构建一个简单的javascript库，允许从同一页面上的图像列表中拖放图像。然而，如果没有某种前端显示和数据持久性，这可能实际上非常有用

编辑：

<div id="gallery">
    <img src="http://html.net/tutorials/javascript/images/1.jpg" alt="Photo gallery image" id="photo" />

    <input type="button" id="btnStart" value="Restart gallery" />
    <input type="button" id="btnStop" value="Stop gallery" />
</div>

您当然可以使用Knockout.js实现这一点。这是一个概念验证提琴：

它当前只使用

span

元素和图像名称，但根据需要在任一部分中用图像标记替换这些元素是一项简单的任务

编辑（2）：

根据您的小提琴，尝试以下方法：

问题是，您试图将图像附加到容器（gallery）元素，但您的库是使用“图像”数组中的图像列表动态构建的，这些图像加载到“preload edimgs”数组中进行迭代

---

我所做的是更新drop函数以获取被删除元素（即图像路径）的“src”，并将其直接添加到“preload edimgs”数组中，以便在运行时将其包含在库中。

@ketan。。谢谢你编辑我的问题：）如果我有一个图片列表，比如说在同一页中有3张照片“5.jpg 6.jpg 7.jpg”，我想将其中一张拖到图库中，例如，我拖动5.jpg并将其放到图库中，那么这些图片将出现在图库中：1.jpg 2.jpg 3.jpg 4.jpg和5.jpg，我已经添加了…有没有更简单的解决方案？？我将尝试使用我的JSFIDLE来准确地显示我的问题所在……在不了解您的具体问题的情况下，您只能提供一个开放式的解决方案，该解决方案将按照您模糊描述的方式工作。我想小提琴是个好的开始。我修改了我的小提琴：现在我想让星星、猫或花在我掉下来后出现在画廊里。是的，非常感谢，这就是我需要的。。但是为什么当我投下图像时，它不会出现在我投下的排列中？我的意思是，如果我把它放在某个图像后，它会在另一个图像后显示。。