Avalon.js 实现Google Plus风格图片拖动排序及源码下载

本文档详细介绍了如何使用Avalon.js框架实现类似Google Plus的图片多张拖动排序功能。Avalon.js是一款轻量级的JavaScript MVVM库，适用于构建单页应用(SPA)和富客户端应用。作者提供了一份源码下载链接，以便开发者可以直接获取并参考。 首先，实现的关键在于创建一个响应式布局，确保图片在不同浏览器和屏幕尺寸下的显示效果。布局采用了HTML结构 `<div id='wrap'>` 包含一个无序列表 `<ul class='justify'>`，每个列表项 `<li>` 包含图片、拖动代理元素和一些辅助元素。为了兼容IE7、8和Firefox，以及现代浏览器，使用了`inline-block` 和文本对齐的CSS属性，低版本采用`text-align:justify`，而在支持flexbox的现代浏览器中，使用了`display:flex`和`justify-content:space-between`来实现图片间的等间距布局。 在CSS中，`<div class='photo_mask'></div>` 用于遮罩图片，隐藏原始的图片控件；`<div class="dummy"></div>` 是一个占位元素，用来调整图片的实际大小和位置；`<img>` 是实际的图片元素，配合`<i>` 作为可拖动区域。当鼠标悬停在图片上时，`.no_selected` 类会被添加，表示未被选中。 在拖动功能的实现上，Avalon.js提供了事件监听和数据绑定的能力，允许用户通过鼠标操作改变图片的顺序。拖动代理图片始终保持等比例居中，当拖动到目标位置时，相邻图片会根据规则发生偏移。例如，最左边或最右边的图片仅会有一侧图片移动，其余保持不动。 为了达到预期效果，开发者需要处理以下几点： 1. 图片布局：使用`justify-content: space-between` 或 `text-align: justify` 保证图片间的等间距，同时设置合理的间距与边界条件。 2. 响应式设计：通过媒体查询和计算，确定在特定尺寸下调整图片数量、间距或缩放策略。 3. 拖动行为：使用Avalon.js的drag-and-drop API，监听`dragstart`、`dragover`、`drop` 事件，更新图片的位置，并可能涉及到数据同步。 4. 边界处理：确保在图片拖动到边缘时，正确处理边界效应，如只让一行的第一张或最后一张图片发生偏移。 源码下载链接可供读者下载，用于直接集成到项目中并根据需求进行定制。本文档为开发者提供了一个实用的示例，可以帮助他们快速理解和实现类似的拖动排序功能。