如何实现拖放图像？

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值并将此数据发送回服务器以进行进一步处理（例如，将“position”作为INT存储在数据库中）。

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