avalonjs實現仿微博的圖片拖動特效

 　　JavaScript實現仿微博的圖片拖動特效，貌似這些天有不少朋友需要這功能，今天發現這款是js制作的好，不敢獨享，希望需要的朋友喜歡哦。

　　效果：

　　HTML:

　　?

1 2 3 4 5 6 <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>

　　JS:

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//拖動的代理，原圖片，原圖片的src var post_img = avalon.define('post_img', function(vm) { vm.post_img_list=[];//保存所有圖片的src vm.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*100 var y_index=Math.floor(y/100); post_img.post_img_list.splice(index, 1);//刪除當前圖片的li var target_index=3*y_index+x_index;//目標圖片的位置（3*3） if(post_img.post_img_list.indexOf('about:blank')!=target_index) //如果圖片數組中沒有src=about:blank這個占位置的li post_img.post_img_list.splice(target_index, 0, 'about:blank'); //添加src=about:blank index=target_index; //會觸發很多次move,所以觸發一次就改動一次 } }; }); document.onmouseup=function(e){ drag_holder=null; if(ori_src){ post_img.post_img_list.splice(index, 1); //刪除src=about:blank post_img.post_img_list.splice(index, 0,ori_src); //添加原圖片 } $('drag_proxy').style.display='none'; $('drag_proxy').innerHTML=''; drag_flag=false; };

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。