效果：

HTML:

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=[]；//保存所有图片的src vm.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);//删除当前图片的Li var target _ index=3 * y _ index x _ index；//目标图片的位置(3 * 3)if(post _ img。post _ img _ list。indexof('约：空白')！=target_index) //如果图片数组中没有src=约：空白这个占位置的李邮政。post _ img _ list。拼接(target _ index，0，'约：空白')；//添加src=约大约：空白索引=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 }；以上所述就是本文的全部内容了，希望大家能够喜欢。