源碼下載：http://xiazai.VeVB.COm/201509/yuanma/drag_sort1(VeVB.COm).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`

具體參見本