avalonjs仿微博的图片拖动

效果：

转载请注明出处： http://www.cnblogs.com/TheViper/p/4026401.html 

1 <div id='post_img' ms-controller='post_img'>

2     <ul id='post_img_inner' ms-mousemove='onmousemove'>

3         <li ms-repeat-el="post_img_list" class='inline-block' ms-mousedown='onmousedown($event,$index,el)' ms-attr-id='post_img_item{{$index}}'>

4             <img ms-src='el' class='uploaded_img'></li>

5     </ul>

6 </div>

 

 1 var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//拖动的代理，原图片，原图片的src

 2 var post_img = avalon.define('post_img', function(vm) {

 3     vm.post_img_list=[];//保存所有图片的src

 4     vm.onmousedown=function(e,i,el){

 5         $('drag_proxy').style.display='block';

 6         var target=e.target.parentNode;

 7         var xx = e.clientX; 

 8         var yy = e.clientY;

 9         $('drag_proxy').style.top=yy+'px';

10         $('drag_proxy').style.left=xx+'px';

11         if(target&&target.nodeName=='LI'){

12             ori_src=el;

13             index=target.getAttribute('id').substring(13);

14             $('drag_proxy').innerHTML=target.innerHTML;

15             post_img.post_img_list.splice(i, 1, 'about:blank');

16         }

17         drag_flag=true;

18     }; 

19     vm.onmousemove=function(e){

20         if(drag_flag){//如果点下了图片

21             var xx = e.clientX; 

22             var yy = e.clientY; 

23             $('drag_proxy').style.top=yy+'px';

24             $('drag_proxy').style.left=xx+'px';

25             var x=xx-avalon($('post_img')).offset().left;

26             var y=yy-avalon($('post_img')).offset().top;

27             //例子没有考虑滚动条的情况

28             var x_index=Math.floor(x/100);//图片尺寸100*100

29             var y_index=Math.floor(y/100);

30             post_img.post_img_list.splice(index, 1);//删除当前图片的li

31             var target_index=3*y_index+x_index;//目标图片的位置（3*3）

32             if(post_img.post_img_list.indexOf('about:blank')!=target_index)

33             //如果图片数组中没有src=about:blank这个占位置的li

34                 post_img.post_img_list.splice(target_index, 0, 'about:blank');

35                 //添加src=about:blank

36             index=target_index;

37             //会触发很多次move,所以触发一次就改动一次

38         }

39     };

40 });

41 document.onmouseup=function(e){

42     drag_holder=null;

43     if(ori_src){

44         post_img.post_img_list.splice(index, 1);

45         //删除src=about:blank

46         post_img.post_img_list.splice(index, 0,ori_src);

47         //添加原图片

48     }

49     $('drag_proxy').style.display='none';

50     $('drag_proxy').innerHTML='';

51     drag_flag=false;

52 };

司徒正美https://github.com/RubyLouvre/avalon的avalon mvvc真的很强大！