源码下载：http://xiazai.jb51.net/201509/yuanma/drag_sort1(jb51.net).rar

效果展示如下：

google plus

拖动+响应式效果：

要求

1. 两边对齐布局，即图片间间距一致，但左右两边的图片与边界的间距不一定等于图片间间距，兼容ie7,8,firefox,chrome.
2. 浏览器尺寸变化，在大于一定尺寸时，每行自动增加或减少图片,自动调整图片间间距，以满足两边对齐布局，这时每张图片尺寸固定（这里是200*200px）；而小于一定尺寸时，每行图片数量固定（这里最小列数是3），这时图片总是等比例拉伸或缩放。
3. 浏览器不同尺寸下，仍然可以拖动排序。
4. 图片，拖动代理里的图片始终保持等比例且水平垂直居中。
5. 拖动到相应位置时，位置左右的图片发生一定偏移。如果在最左边或最右边，则只是该行的第一张图片或最后一张图片发生偏移。
6. 支持多张图片拖动排序。

实现

布局及css

 <div id='wrap'>  <ul class='justify'>   <li>    <a href="javascript:;" class="no_selected"></a>    <div class='photo_mask'></div>    <div>     <div class="dummy"></div>     <p><img><i></i></p>    </div>   </li>   <li class='justify_fix'></li>  </ul> </div>inline-block+flex-box+text-align:justify

这里要兼容低版本浏览器，所以列表li布局用的是inline-block.而两边对齐布局

-低版本：inline-block+`text-align:justify`

-现代：inline-block+`flex-box`

具体参见本