源代码下载：http://xiaozai.jb51.net/201509/yuanma/drag _ sort 1(jb51.net)。

效果如下所示：

谷歌plus

阻力响应效果：

要求

1.布局是两边对齐的，即图片之间的间距是一致的，但是左右图片和边框之间的间距不一定等于图片之间的间距，这与ie7、8、Firefox和chrome兼容。2.浏览器大小会改变。大于一定尺寸时，每一行自动增减图片，并自动调整图片之间的间距，以满足两侧对齐的布局。此时，每张图片的大小都是固定的(这里，200 * 200px)。当它小于一定尺寸时，每行的图片数是固定的(这里最小列数是3)，然后图片总是按比例拉伸或缩放。3.在不同大小的浏览器下，你仍然可以拖动和排序。4.图片，拖动代理中的图片始终保持相等的比例，水平和垂直居中。5.拖动到相应位置时，左右位置的图片会有一定程度的偏移。如果在最左边或最右边，则只偏移该行的第一张图片或最后一张图片。6.支持多张图片拖动和排序。

实现

布局和css

div id=' wrap ' ul class=' justify '阿利href=' javascript:'class=' no _ selected '/a Div class=' photo _ mask '/Div Div class=' dummy '/Div pimci/I/p/Div/Li Li class=' aligned _ fix '/Li/ul/Div内联块flex-box text-align :此处的alignment应该与较低版本的浏览器兼容，因此list li的布局是内联块的，并且两边对齐。

-低版本：内联-阻止` text-align :调整`。

-现代：内嵌块`弹性盒`。

详情见刁的模拟flexbox调整内容的间隔。

这里不使用flex-box的“align-content : space-round”的原因是它不能通过“text-align : justice”与较低版本的浏览器兼容。

` text-align : align '不能使最左边和最右边的文本自动调整距框边缘的距离。即使padidng被添加到外箱，例如：

Li { margin 33600 1%；} # wrap { padd :0 1%；}好像是最左边的，最右边到框边的距离和li之间的距离一样，都是2%。实际上，盒子外面设置的填充永远不会改变，li之间的边距是它们之间距离的最小值。如果所有li之间的间距是1%，那么一行中仍然有多余的空格，这些li会平均分配空格，那么它们之间的间距将超过1%。

Li { list-style-type : none；display : inline-block；*display:内联；zoom:1最大宽度： 200 px；最大高度： 200 px；宽度：28%；border:1px纯红；相对位置：飞越：隐藏；保证金：10 px 2%；}li[class='狡辩_修复']{ border : none；}.调整{ display: flexalign-items : flex-start；flex-flow:行包装；justice-content :空格；文本对齐：对齐；text-justify : inter-象形字；* zoom : 1；-moz-text-align-last:调整；-webkit-text-align-last:调整；text-align-last:对齐；} @ media(-web kit-min-device-pixel-ratio :0){ { content : }之后的justify:afterdisplay:内联块；宽度： 100%；}}在此添加“最大宽度”和“最大高度”。您可以看到单元格内有百分比，因此您需要限制外部的最大大小。

响应图片的水平和垂直居中。

详见本刁的css图片。响应垂直和水平居中。

选择图片。

Google plus是按住ctrl键，点击图片完成多选。在这里，点击‘框’(这里是‘a class=‘no _ selected’/a `)。点击后，将当前图片的索引转移到保存所选图片索引的数组中(此处为selected_index)。如果索引不存在，则添加它；已经存在，删除它。“box”根据数组中是否存在索引来调整样式。

div id=' wrap ' ms-controller=' photo _ sort ' ul class=' alignment ' Li ms-repeat=' photo _ list ' a href=' JavaScript :'class=' no _ selected ' ms-class-selected _ icon=' selected _ index。indexof($ index)-1 ' ms-click=' select($ index)'/a./Li Li class=' justice _ fix '/Li/ul/div var photo _ sort=Avalon。定义({ selected _ index :[]，//选中图片的指数列表，选择：函数(I){ var selected _ index=photo _ sort。selected _ indexif(selected _ index。indexof(I)==-1)//选中图片的指数列表不存在，添加照片_排序。selected _ index。确认(一)；else photo _ sort。selected _ index。去掉(一)；}});鼠标放下

这里用了遮罩层，并在上面绑定鼠标放下事件。

a href=' JavaScript : ' class=' no _ selected ' ms-class-selected _ icon=' selected _ index。indexof($ index)-1 ' ms-click=' select($ index)'/adiv class=' photo _ mask ' ms-鼠标按下=' start _ drag($ event，$ index)'/div var photo _ sort=Avalon。定义({ $ id : ' photo _ sort '，photo _ list 3360[]，//图片列表selected_index:[]，//选中图片的指数列表drag_flag:false，sort_array:[]，//范围列表，cell_size:0，//每个单元格尺寸，这里宽高比为1 target_index:-1，//最终目标位置的index col _ num:0，//列数x_index:-1，//当前拖动位置的x方向指数.});start_drag:function(e，index){ if(photo _ sort。selected _ index。size()){//有选中的图片photo _ sort . target _ index=index//避免用户没有拖动图片，但点击了图片，设置默认目标即当前点击图片照片_排序。cell _ size=这个。客户端宽度；var xx=e . clientx-photo _ sort。cell _ size/2，YY=e . clienty-photo _ sort。单元格大小/2；//点下图片，设置代理位置以点击点为中心$(“drag _ proxy”)。风格。top=YY阿瓦隆(窗口)。滚动ToP()" px "；$(“drag _ proxy”)。风格。left=xx ' px$(“拖动代理”)。风格。宽度=photo _ sort。cell _ size“px”；$(“拖动代理”)。风格。高度=照片_排序。cell _ size“px”；拖动代理。select _ num=photo _ sort。selected _ index。长度；//设置代理中选择图片的数量if(拖动代理。select _ num 0){ var drag _ img=photo _ sort。照片列表[照片排序]。selected _ index[drag _ proxy。select _ num-1]]；拖动代理。src=drag _ img。src//将选中的图片中最后一张作为代理对象的'封面photo _ sort . drag _ flag=true $(“drag _ proxy”)。风格。display=" block} //cell_gap:图片间间距，first_gap:第一张图片和外部差异间间距var wrap _ width=Avalon($(“wrap”).width()，wrap _ offset=$(“wrap”).offsetLeft，first_left=$('wrap_photo0 ').offsetLeft，second_left=$('wrap_photo1 ').offsetLeft，first _ gap=first _ left-wrap _ offset，cell _ gap=second _ left-first _ left；照片_排序。col _ num=数学。round((wrap _ width-2 * first _ gap(cell _ gap-photo _ sort。cell _ size))/cell _ gap)；for(var I=0；iphoto _ sort.col _ numi )//把一行图片里的每张图片中心坐标x方向的值作为分割点，添加到范围列表照片_排序。排序数组。push(first _ gap cell _ gap * I photo _ sort。cell _ size/2)；var target=this . parentnodavalon . bind(文档，'鼠标向上'，函数{ onMouseUp(目标);});if(ISie)目标。setcapture()；//让工程师协会下拖动顺滑e . stopperpagation()；e . PreventDefault()；}}鼠标点下，选中的图片的遮罩出现，这里是对其添加` .photo_maskon `

div class=' photo _ mask ' ms-class-photo _ mask on=' drag _ flag selected _ index。indexof($ index)-1 ' ms-鼠标按下=' start _ drag($ event，$index)'/divmousemove

drag _ move : function(e){ if(photo _ sort . drag _ flag){ var xx=e . clientx，yy=e.clientY，offset=avalon($('wrap '))。offset()；var offsetX=xx-offset.left，offsetY=YY-offset . top；photo _ sort . sort _ array . push(offsetX)；//将当前鼠标位置添加到范围列表photo _ sort.sort _ array.sort(函数(a，b){//排序范围列表返回parsent(a)-parsent(b)；//转换为数字类型，否则会出现' 1234 ' ' 333 ' })；//从排序后的范围列表中找出当前鼠标位置的索引，即目标位置水平方向的索引var x _ index=photo _ sort . sort _ array . indexof(offset x)，y _ index=math . floor(offset ty/(photo _ sort . cell _ size20))，size=photo _ sort。photo _ sort.x _ index=x _ indexphoto _ sort . target _ index=photo _ sort . col _ num * y _ index x _ index；//索引if (photo _ sort。target _ index size)在所有图片中//目标位置超出界限photo _ sort.target _ index=sizephoto _ sort . sort _ array . remove(offsetX)；//删除当前位置$(“drag _ proxy”)。style.top=Avalon(窗口)。scrolltop () YY-photo _ sort。cell _ size/2 ' px '；$(' drag _ proxy '). style . left=xx-photo _ sort . cell _ size/2 ' px '；} e . stopperpagation()；}关于确定当前拖动位置的几点注意事项。

图中每个单元格的垂直线将单元格分成水平方向的两侧。每条垂直线将一条线分成五个部分。判断时，看五个部分的哪一部分是鼠标当前的e . client x’。

-在这里，我们在判断中使用排序。具体来说，将每个竖线的x坐标和当前鼠标位置的x坐标保存到一个数组中(' sort_array '此处)，排列顺序，然后' indexOf '查看当前鼠标位置的x坐标在数组中的位置，即可得到当前拖动目标位置。

如果不需要排序，代码将如下所示。

var目标；if(x50 50){ if(x3 * 100 3 * 100 50 50){//target的最后一部分=4；} else { target=(x-50-50)/(50 100 50)；} } else target=0；-当前鼠标位置的x坐标稍后会被删除，该位置会被空出来用于下一个mousemove事件的x坐标。-当前拖动目标位置周围的图片有一定的偏差，无非是给目标位置周围的图片添加了对应的类。prev { right: 40px}.下一个{ left: 40px} div id=' wrap ' ms-controller=' photo _ sort ' ul class=' justice ' ms-mouse move=' drag _ move($ event)' Li ms-repeat=' photo _ list ' ms-attr-id=' wrap _ photo { { $ index } } ' ms-class-prev=' $ index==target _ index-1 ' ms-class-next=' $ index==target _ index './Li class=' justice _ fix '/Li/ul/div这里需要注意的是，当代理被拖动到最左边或最右边时，由于布局是内联块'，目标位置的前一行中的最后一个单元格(如果有)或下一行中的第一个单元格(如果有)也会被偏移。

解决方法是设置变量“x_index ”,它指示单元格在x方向上的索引。添加偏移类时，添加判断条件。

Li ms-repeat=' photo _ list ' ms-attr-id=' wrap _ photo { { $ index } } ' ms-class-prev=' $ index==target _ index-1x _ index 0 ' ms-class-next=' $ index==target _ indexx _ index col _ num './limouseup

function onMouseUp(target){ if(photo _ sort . drag _ flag){ for(var I=0，len=photo _ sort . selected _ index . size()；伊琳；I ){//遍历选中图片varitem _ index=photo _ sort . selected _ index[I]，数据=photo _ sort.photo _ list，target _ index=photo _ sort . target _ index，tempIf(item_indextarget_index){//目标位置为temp=data[item_index]。选中图片后的srcfor(var j=item _ index；jtarget _ indexj)数据[j]。src=数据[j 1]。src数据[target_index-1]。src=温度；}else{//目标位置在所选图片temp=data[item_index]之前。srcfor(var j=item _ index；jtarget _ indexj -)数据[j]。src=数据[j-1]。src数据[target_index]。src=温度；} } photo _ sort . target _ index=-1；//各种复位，初始化photo _ sort . sort _ array=[]；photo _ sort . col _ num=0；photo _ sort . x _ index=-1；photo _ sort . selected _ index=[]；$(“drag _ proxy”). style . display=“none”；photo _ sort.drag _ flag=falseavalon.unbind(文档，‘mouse up’)；if(ISie)target . release capture()；}}这主要是关于图片列表的重新排列。-目标位置在所选图片之前。

先将原图片保存在' temp '中，然后将图片从目标位置移动到原图片的前一个位置依次后退一个位置，最后将' temp '放在目标位置。-目标位置在所选图片之后。

和上面类似，只是原图片依次向前移动一个位置后，图片从目标位置移动到下一个位置。

注意

您不能像' data[j]=data[j 1]'那样赋值，因为avalon不支持单一转换，如果您想要更新，您需要用一个新对象重新分配整个子VM。也就是说，定义一个arr，然后从头给它添加一个模型，最后` photo_sort.photo_list.clear()`删除所有图片，` photo_sort.photo_list=arr `重新赋值并更新视图。

附言

事实上，谷歌plus也做过——图片的框选——如果有滚动条，并且拖动位置即将超过当前界面，滚动条会自动上下移动。这两个鸡巴做不到，原理很简单。