首页 / 脚本样式 / JavaScript / avalonjs实现仿微博的图片拖动特效

HTML:

<div id="post_img" ms-controller="post_img"> <ul id="post_img_inner" ms-mousemove="onmousemove"><li ms-repeat-el="post_img_list" class="inline-block" ms-mousedown="onmousedown（$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;//拖动的代理，原图片，原图片的srcvar post_img = avalon.define（"post_img", function（vm） {vm.post_img_list=[];//保存所有图片的srcvm.onmousedown=function（e,i,el）{$（"drag_proxy"）.style.display="block";var target=e.target.parentNode;var xx = e.clientX; var yy = e.clientY;$（"drag_proxy"）.style.top=yy+"px";$（"drag_proxy"）.style.left=xx+"px";if（target&&target.nodeName=="LI"）{ori_src=el;index=target.getAttribute（"id"）.substring（13）;$（"drag_proxy"）.innerHTML=target.innerHTML;post_img.post_img_list.splice（i, 1, "about:blank"）;}drag_flag=true;}; vm.onmousemove=function（e）{if（drag_flag）{//如果点下了图片var xx = e.clientX; var yy = e.clientY; $（"drag_proxy"）.style.top=yy+"px";$（"drag_proxy"）.style.left=xx+"px";var x=xx-avalon（$（"post_img"））.offset（）.left;var y=yy-avalon（$（"post_img"））.offset（）.top;//例子没有考虑滚动条的情况var x_index=Math.floor（x/100）;//图片尺寸100*100var y_index=Math.floor（y/100）;post_img.post_img_list.splice（index, 1）;//删除当前图片的livar target_index=3*y_index+x_index;//目标图片的位置（3*3）if（post_img.post_img_list.indexOf（"about:blank"）！=target_index）//如果图片数组中没有src=about:blank这个占位置的lipost_img.post_img_list.splice（target_index, 0, "about:blank"）;//添加src=about:blankindex=target_index;//会触发很多次move,所以触发一次就改动一次}};}）;document.onmouseup=function（e）{drag_holder=null;if（ori_src）{post_img.post_img_list.splice（index, 1）;//删除src=about:blankpost_img.post_img_list.splice（index, 0,ori_src）;//添加原图片}$（"drag_proxy"）.style.display="none";$（"drag_proxy"）.innerHTML="";drag_flag=false;};