使用avalon.js创建Google Plus风格图片拖动排序

"avalon js实现仿google plus图片多张拖动排序附源码下载" 本文将探讨如何使用JavaScript框架Avalon.js实现一个仿Google Plus的图片多张拖动排序功能，同时保持响应式布局。提供的源码可供下载，帮助开发者理解和实践这一技术。 首先，我们来分析实现这个功能所需的关键点： 1. **两边对齐布局**：为了实现图片间的间距一致，同时确保图片与边界保持一定的距离，我们可以采用`inline-block`结合`text-align:justify`的CSS方法。对于现代浏览器，可以利用`flex-box`布局，但需要考虑IE7和8的兼容性问题。 2. **响应式设计**：当浏览器窗口尺寸变化时，我们需要动态调整每行的图片数量和间距。在大屏幕尺寸下，每行图片数量会自动增减，保持图片固定尺寸（如200*200px）。而在小屏幕尺寸下，每行固定显示一定数量的图片（如3列），并保持图片的等比例缩放。 3. **拖动排序功能**：实现拖动排序，我们需要监听鼠标事件，包括`mousedown`、`mousemove`和`mouseup`，来跟踪用户拖动行为。拖动过程中，相邻图片的位置需要实时更新，以呈现正确的视觉效果。同时，拖动到最左侧或最右侧时，仅改变当前行的第一张或最后一张图片的位置。 4. **图片的等比例居中**：无论图片大小如何，都需要保持其等比例缩放，并保持水平垂直居中。这可以通过CSS的`transform`属性和`display: flex`来实现。 5. **图片偏移**：在拖动过程中，目标位置两侧的图片应有适当的偏移，以提供视觉反馈。根据拖动位置，调整相邻图片的位置，可以使用JavaScript来计算并更新CSS样式。 6. **多张图片拖动**：支持同时拖动多张图片进行排序，需要更复杂的事件处理和状态管理。 在实现过程中，Avalon.js可以作为MVVM（Model-View-ViewModel）框架，帮助我们绑定数据和视图，简化DOM操作。使用Avalon.js，我们可以创建数据模型来表示图片信息，然后将这些信息映射到视图上，通过双向数据绑定实现拖动排序的效果。 源码下载地址：http://xiazai.jb51.net/201509/yuanma/drag_sort1(jb51.net).rar 在这个项目中，开发者可以找到具体的HTML结构、CSS样式以及Avalon.js的JavaScript代码，学习如何将这些技术结合起来实现功能。 这个仿Google Plus图片拖动排序的实现不仅展示了Avalon.js在动态交互中的应用，还涉及到了响应式布局和拖放技术，是提升前端开发技能的一个好例子。通过研究和实践，开发者可以掌握更多的Web开发技巧，尤其是面对兼容性和交互性挑战时的解决方案。