Avalon.js 实现微博图片拖动排序示例与兼容

本文主要介绍了如何使用Avalon.js框架实现仿微博风格的图片拖动排序功能。在微博应用中，用户可以上传多张图片，并通过拖动调整它们的展示顺序。实现这一功能的关键步骤如下： 1. **图片拖动基础**： 首先，你需要确保图片元素具有拖动能力，这通常通过监听`mousedown`事件并在`dragstart`事件中启动拖动过程。在这个阶段，会创建一个代理元素（如`<div id='drag_proxy'></div>`），实际拖动的是这个代理，而非原始图片。当用户点击图片时，代理元素会被移动到鼠标点击的位置，并隐藏原图片，显示代理。 2. **预览占位符**： 在拖动过程中，当图片离开其初始位置并拖动到目标区域但鼠标尚未释放时，会在目标位置放置一个占位符，以便用户预览拖动完成后的新排列。这可以通过动态修改代理元素的位置和尺寸来实现。 3. **响应式设计**： 要确保图片排序功能在不同屏幕尺寸下都能正常工作，图片需要采用响应式布局。这意味着外部容器（`<div class='ms-controller'>`）应该是等高等宽的，内部图片则按比例缩放。 4. **跨浏览器兼容性**： 文章特别强调了对IE7的支持，这意味着在编写代码时需要考虑旧版浏览器的特性和API差异，可能需要使用一些polyfill或者处理特定版本的浏览器兼容问题。 5. **Avalon.js的实现细节**： 使用Avalon.js的指令（如`ms-controller`、`ms-mousemove`和`ms-attr`）来管理数据绑定和事件处理。例如，`ms-mousedown='start_drag($event,$index,el)'`用于绑定事件处理器，`start_drag`函数负责处理拖动的开始，包括代理元素的初始化和图片的隐藏。 具体代码示例展示了如何在Avalon.js的框架内操作DOM元素和监听鼠标事件，以实现在不同浏览器中的拖动图片排序功能。然而，文章也提到可能存在不足之处，鼓励读者提出批评和建议以完善这个功能。 总结起来，这篇文章提供了利用Avalon.js进行图片拖动排序的具体实现方法，涵盖了从基础逻辑到兼容性考虑的全面内容，适合想要学习或优化此类功能的开发者参考。