javascript - 如何实现拖放图像？

Question

您将如何实现一个功能，以便用户可以上传他们的图像，然后按照他们想要展示照片的顺序拖放它们？我正在使用 ROR 框架。也许是宝石？

Answer 1

一种方法是将图像放在一个列表中，并给每个 li 一个带有图像 ID 的数据属性，例如：

<ul>
    <li data-image_id="1"><img src="/image1.png" /></li>
    <li data-image_id="2"><img src="/image2.png" /></li>
</ul>

然后编写一些不错的 JavaScript 代码（您可以使用 Jquery 插件，例如http://farhadi.ir/projects/html5sortable/）并使用回调结束拖动。在回调中，您编写了一个循环列表的小代码，解析 data-image_id 值并将此数据发送回服务器以进行进一步处理（例如，通过将“位置”作为 INT 存储在数据库中）。

附言。我建议使用位置字段 DESC 以便以 0/null 作为位置的新图像自动结束为行中的最后一个。您的客户在将 4 张新图像添加到精心订购的集合后，不必重新排列所有图像，您会很高兴。