html元素拖拽 标签拖拽

调用发方法 传入要拖拽元素的id

elDrag (id)；

兼容 pc端 & 手机端

只做左右吸附 上下超出未做限制

放开位置小于宽度50%靠左吸附，大于50%靠右吸附

    elDrag (id) {
		var dragEl = '';
		var bodyWidth = $(document.body).width();
		var flag = false;
		var cur = {
			x:0,
			y:0
		};
		var nx = 0;
		var ny = 0;
		var dx = 0;
		var dy = 0; 
		var x = 0;
		var y = 0;
		var touch = '';
	
		initDrag(id);
		function down(event) {
			flag = true;
			if(event.touches){
				touch = event.touches[0];
			}else {
				touch = event;
			}
			cur.x = touch.clientX;
			cur.y = touch.clientY;
			dx = dragEl.offsetLeft;
			dy = dragEl.offsetTop;
		}
		function move(event){
			if(flag){
				if(event.touches){
					touch = event.touches[0];
				}else {
					touch = event;
				}
	
				//阻止页面的滑动默认事件
				event.preventDefault();
	
				nx = touch.clientX - cur.x;
				ny = touch.clientY - cur.y;
				x = dx + nx;
				y = dy + ny;
				dragEl.style.left = x + 'px';
				dragEl.style.top = y + 'px';
			}
		}
		//鼠标释放时候的函数
		function end(){
			var pageX = touch.pageX;
			var newBodyWidth = bodyWidth / 2;
			if(newBodyWidth > pageX) {
				dragEl.style.right='unset';
				dragEl.style.left = '0px';
			} else {
				dragEl.style.left='unset';
				dragEl.style.right = '0px';
			}
	
			flag = false;
		}
		function initDrag(id) {
			if(!id) {
				return;
			}
	
			dragEl = document.getElementById(id),
	
			dragEl.addEventListener('mousedown',function(event){
				down(event);
			},false);
			dragEl.addEventListener('touchstart',function(event){
				down(event);
			},false)
			dragEl.addEventListener('mousemove',function(event){
				move(event);
			},false);
			dragEl.addEventListener('touchmove',function(event){
				move(event);
			},false)
			document.body.addEventListener('mouseup',function(){
				end();
			},false);
			dragEl.addEventListener('touchend',function(){
				end();
			},false);
		}
	}