下面，模仿微博的图片随意拖动，图片顺序调整，讲解非常详细。文章肯定有不足之处，欢迎批评指正。废话少说，我们来看看具体内容。

点击这里进入源代码下载

什么是拖动图片排序？

就像微博一样，允许用户在上传后通过拖动来调整几张图片的顺序。

可以看到，微博在这里固定了每张图片的大小。如果稍微严谨一点的话，需要像上一篇文章一样，有几个外高内宽的响应式div容器，内等比例的响应式图片。

先说说要求。

1.当然，首先，图片应该是可拖动的。

2.在图片移出原位置并拖动到目标位置，鼠标未松开完成拖动之前，需要在目标位置设置一个占位符，以便用户在拖动后预览效果。

3.响应风格。尺寸改变后，上述要求仍可满足。

4.兼容尽可能多的浏览器。其实写文章就是为这篇文章做铺垫，所以也是兼容ie7的。

最终效果

铬

ie8

ie7

首先是拖。

这里使用的代理意味着在原始布局中有一个额外的div，实际拖动的对象就是这个div。具体来说，

Div id=' wrap ' ms-controller=' drag _ sort ' class=' ms-controller ' ul ms-mouse move=' drag _ move($ event)' Li ms-repeat=' photo _ list ' Div ms-mouse down=' start _ drag($ event，$index，El)' Div class=' dummy '/Div p ms-attr-id=' wrap _ img { { $ index } } ' img ms-attr-src=' http : El . src ' I/p/Div/Li/ul Div id当start_drag被触发时，将单元格列中的img放入proxy div id='drag_proxy'/div，同时获取图片大小，记录当前鼠标点击位置，并将点击位置作为proxy div矩形(图片)的中心点，显示proxy，隐藏被点击的图片。

start_drag:function(e，I，el){ var img=$('wrap_img' i)。firstChild，target _ img _ width=img . client width，target _ img _ height=img . client height；drag _ sort . cell _ size=$(' wrap _ img 0 ')。clientWidthvar xx=e . clientx-target _ img _ width/2，YY=e . clienty-target _ img _ height/2，offset=Avalon($(drag _ sort . container))。offset()，target=e . target . parent node . parent node . parent node；$(' drag _ proxy '). style . top=YY Avalon(窗口)。scroll top()-offset . top ' px '；$(' drag _ proxy '). style . left=xx-offset . left ' px '；$(' drag _ proxy '). style . width=target _ img _ width ' px '；$(' drag _ proxy '). style . height=target _ img _ height ' px '；if(target target . nodename==' LI '){ ori _ src=El；//$(“drag _ proxy”)。innerHTML=target . queryselector(' p ')。innerHTML$(“drag _ proxy”)。innerHTML=$('wrap_img' i)。innerHTML$(“drag _ proxy”). style . display=“block”；drag _ sort . target _ index=I；drag _ flag=true} if(ISie)target . SetCapture()；avalon.bind(document，' mouseup '，function(){ up(target)；});e . stopperpagation()；e . PreventDefault()；}注意几点：

1.drag_sort.cell_size记录当前单元格的大小，其中长宽比为1:1，所以布局是有响应的，所以需要记录。稍后您可以看到如何使用这个。

2.事件的目标需要判断是否是img标签触发的，因为点击的位置有可能是单元格和图片之间的空白区域。

3.ori_src用于保存当前单元格的图片，因为鼠标移动后图片原位置的单元格会被删除。

4.drag_sort.target_index记录当前单元格的索引，该索引将与代理移动到的单元格的索引进行比较。

5.drag_flag指示mousemove是否可用。

6.对于ie，必须是target . setcapture()；否则，

您可以看到浏览器的默认行为是在拖动时执行的。

7 . event . preventdefault()；还必须添加，否则会出现浏览器默认行为。例如，当firefox拖动图片时，它会打开一个新的选项卡并显示图片。

然后是mousemove，它绑定到ul标签。像mousemove一样，mouseup事件通常绑定到几个需要触发元素的公共父元素，从而减少绑定到事件的对象数量。

特殊的

drag _ move :函数(e){ if(drag _ flag){ var xx=e . client x，yy=e.clientY，offset=Avalon($(drag _ sort。集装箱).offset()；var x=xx-offset.left，y=avalon(窗口)。滚动ToP()-YY-偏移量。顶部；var x _ index=数学。地板(x/drag _ sort。单元格大小)，y _ index=数学。地板(y/drag _ sort。cell _ size)，move _ to=3 * y _ index x _ index $(' drag _ proxy ')。风格。top=y拖动排序。cell _ size/2 ' px '；$(“drag _ proxy”)。风格。left=x-drag _ sort。cell _ size/2 ' px '；if(move_to！=拖动_排序。target _ index){ drag _ sort。照片列表。移除于(拖动_排序。target _ index)；拖动_排序。照片列表。拼接(move _ to，0，{ src : ' 1。jpg ' })；拖动_排序。target _ index=move _ to} } e . stopperpagation()；}几点说明

1 .拖动标志保证必须先触发鼠标放下后，才可以触发鼠标移动。

2 .拖动_排序。容器是整个布局的根元素，这里是div id='wrap'/div .

#环绕{位置：相对最大宽度： 620像素；font-size : 0；} # drag _ proxy { position : absolute；border:1px固体# 009 be 3z-指数： 100；显示器：无；}后面计算的时候要把根元素的左侧，顶部减掉。

3.计算时阿瓦隆（窗口)。scrollTop()浏览器的竖直滚动条也要考虑。

4.每个单元格的尺寸始终是一样的，所以直接光标移动到的位置除以行数，列数，取整，得到目标单元格的索引。

5 .移动到！=拖动_排序。目标_索引当前光标移到的单元格不是图片原本所在的单元格，删除图片原本位置的单元格，在目标单元格插入占位的单元格，这时拖动的图片还没放进目标单元格，最后更新初始单元格的索引。

最后是鼠标向上

函数向上(目标){ if(ISie)目标。释放捕获()；var target _ index=drag _ sort。目标_索引；if(ori _ srctatarget _ index！=-1){ drag _ sort。照片列表。拼接(target _ index，1)；拖动_排序。照片列表。拼接(target _ index，0，ori _ src)；} drag _ holder=null drag _ flag=false drag _ sort。target _ index=-1；$(“拖动代理”)。风格。display=" noneavalon.unbind(文档、“鼠标向上”)；}判断ori _ srctatarget _ index！=-1目的在于排除在非绑定对象上鼠标向上这种无效操作。因为是在文件上绑定鼠标向上，就要排除类似于随便在空白处点击这种情况。这时不能对单元格删除，插入。

然后是把各变量设为初始值。

图片效果：

超文本标记语言代码：

div id=' post _ img ' ms-controller=' post _ img ' ul id=' post _ img _ inner ' ms-mouse move=' on mouse move ' Li ms-repeat-El=' post _ img _ list ' class=' inline-block ' ms-mouse down=' on mouse down($ event，$index，El)' ms-attr-id=' post _ img _ item { $ index } } ' img ms-src=' El ' class=' uploaded _ img '/Li/ul/div代码：

var drag_holder=null，index=-1，ori_src=null，drag _ flag=false//拖动的代理，原图片，原图片的src var post _ img=Avalon。定义(' post _ img '，函数(VM){ VM。post _ img _ list=[]；//保存所有图片的srcvm.onmousedown=function(e，I，El){ $(' drag _ proxy ')。风格。display=' blockvar目标=e目标。父节点；var xx=e . clientxvar YY=e . clienty $(“drag _ proxy”)。风格。top=YY“px”；$(“drag _ proxy”)。风格。left=xx ' pxif(目标目标。nodename==' LI '){ ori _ src=El；index=target.getAttribute('id ').子串(13);$(“拖动代理”).innerHTML=target . innerHTML post _ img。post _ img _ list。拼接(I，1，'约：空白')；} drag _ flag=true }虚拟机。onmousemove=function(e){ if(drag _ flag){//如果点下了图片var xx=e . clientxvar YY=e . clienty $(“drag _ proxy”)。风格。top=YY“px”；$(“drag _ proxy”)。风格。left=xx ' pxvar x=xx-avalon($('post_img ')).偏移量()。向左；var y=yy-avalon($('post_img ')).偏移量()。顶部；//例子没有考虑滚动条的情况var x _ index=数学。楼层(x/100)；//图片尺寸100 * 100 var y _ index=数学。楼层(y/100)；post_img.post_img_list.splice(索引，1);//删除当前图片的livar target _ index=3 * y _ index x _ index；//目标图片的位置(3 * 3)if(post _ img。post _ img _ list。indexof('约：空白')！=target_index)//如果图片数组中没有src=约：空白这个占位置的lipot _ img。post _ img _ list。拼接(target _ index，0，'约：空白')；//添加src=约about : blank index=target _ index//会触发很多次移动，所以触发一次就改动一次}};});文件。onmouseup=函数(e){ drag _ holder=null；if(ori _ src){ post _ img。post _ img _ list。拼接(索引，1)；//删除src=约：空白post _ img。post _ img _ list。拼接(索引，0，ori _ src)；//添加原图片} $(“拖动代理”)。风格。display=" none$(“拖动代理”).innerHTML=drag _ flag=false }；以上代码实现了阿瓦隆射流研究…仿微博拖动图片排序的功能，本文写的不好还请见谅。