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

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>

JS:

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=[];//儲存所有圖片的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;};

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