仿微博的avalon js拖动

标签：拖动   avalon   

	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;
	};

						<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>

最终效果:

司徒正美https://github.com/RubyLouvre/avalon的avalon mvvc真的很强大，，50行js就搞定这个

本文出自 “condom11” 博客，谢绝转载！

仿微博的avalon js拖动

标签：拖动   avalon   

原文地址：http://condom11.blog.51cto.com/9438587/1564211