如何实现拖放图像

How to implement drag and drop image?

本文关键字：拖放 图像 实现 何实现      更新时间：2023-09-26

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

一种方法是将图像放在列表中，并为每个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）。

Ps。我建议使用位置字段DESC，以便以0/null作为位置的新图像自动结束为行中的最后一个图像。您的客户在精心订购的一套图像中添加了4张新图像后，无需重新排列所有图像，您会非常高兴。

相关文章：