avalonjs仿微博的图片拖动
最新版http://www.cnblogs.com/TheViper/p/4725693.html
效果：
转载请注明出处： 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真的很强大！
