使用js实现html5的拖拽----升级版

记得在学习html5的时候有一个拖拽的功能 --- drag和drop，后来看到五百丁简历的简历模板也有这功能，但是都有一个局限性，那就是不能随意拖动到任何位置，会有一定的限制。于是想自己实现一个可以完全*定义模板的简历demo，如下图是简单的一个实现：

可以看到里面的元素可以*地移动所在的位置，可以用这个来实现简历模板的自定义（还未完善）

那么如何来实现元素的自定义位置拖拽呢

我给大家提供以下代码做为参考（纯属参考，可能会有bug）

    

//绑定事件处理程序，很熟悉的兼容浏览器做法
			function addEvent(element,type,func){
			    if(element.addEventListener){
			        element.addEventListener(type,func,false);
			    }else if(element.attachEvent){//兼容IE
			        element.attachEvent("on"+type,func);
			    }else{
			        element["on"+type] = func;
			    }
			}
			//使右键菜单失效
			// document.oncontextmenu=function(){
			// 	return false;
			// }
			//获取event对象
			function getEventObj(event){
			    return event?event:window.event;
			}

			//event的target事件目标,IE浏览器支持window.event.srcElement, 而firefox支持window.event.target!!!!!
			function getTarget(event){
			    return event.target||event.srcElement;
			}

			//取消元素默认行为
			function preventDefault(event){
			    if(event.preventDefault){   //事件绑定是用addEventListener来实现的
			        event.preventDefault();
			    }else{
			        event.returnValue = false;
			    }
			}

			//移除事件处理程序
			function removeEvent(element,type,func){
			    if(element.removeEventListener){
			        element.removeEventListener(type,func,false);
			    }else if(element.detachEvent){
			        element.detachEvent("on"+type,func);
			    }else{
			        element["on"+type] = false;
			    }
			}

			//鼠标拖拽
			function moveElement(element,referenceElement,direction,minDirection,maxDirection,func){
				funcBody.addEvent(element,"mousedown",getMouseDistance);
				funcBody.addEvent(document,"mouseup",mouseUpFunc);
				var returnValue = null;
				switch(direction){
				    case "x": funcBody.addEvent(referenceElement,"mousemove",mouseMoveFunc(element,"x",minDirection,maxDirection,func));
				    	break;
				    case "y": funcBody.addEvent(referenceElement,"mousemove",mouseMoveFunc(element,"y",minDirection,maxDirection,func));
				        break;
				    case "xy": funcBody.addEvent(referenceElement,"mousemove",mouseMoveFunc(element,"xy",minDirection,maxDirection,func));
				        break;
				}
		}

			var targetEle = false;  //设置标记用于判断是否点击了拖拽元素
			var mouseOffsetX = 0,
			    mouseOffsetY = 0;

			//鼠标点击元素获取鼠标距元素左侧和顶部的距离
			function getMouseDistance(){
			    event = funcBody.getEventObj(event);
			    target = funcBody.getTarget(event);
			    mouseOffsetX = event.pageX - target.offsetLeft;
			    mouseOffsetY = event.pageY - target.offsetTop;
			    targetEle = target
			}

			function getChangeValue(func){
			    func();
			}

			//鼠标在元素上移动时执行某函数
			function mouseMoveFunc(element,direction,minDirection,maxDirection,func){
			    return function(){
			        if(element === targetEle){//判断是否mouseDown状态
			            event = arguments[0]||window.event;
			            var mouseX = 0;
			            var mouseY = 0;
			            mouseX = event.pageX - mouseOffsetX;//event.pageX 鼠标指针的位置，相对于文档的左边缘
			            mouseY = event.pageY - mouseOffsetY;
			            funcBody.setElementLT(element,mouseX,mouseY,minDirection,maxDirection,direction);
			            funcBody.getChangeValue(func);
			        }
			    }
			}

			//鼠标按键抬起时将canMove设为false
			function mouseUpFunc(){
			    targetEle = false;
			}

			//设置元素的left和top值
			function setElementLT(element,x,y,min,max,deriction){
			    switch(deriction){
			        case "x": funcX(element,x,min,max);break;
			        case "y": funcY(element,y,min,max);break;
			        case "xy": funcX(element,x,min,max);
			                   funcY(element,y,min,max);
			                   break;
			    }
			}
			function funcX(element,value,min,max){
			    if(value < min){
			        element.style.left = min + "px";
			    }else if(value > max){
			        element.style.left = max + "px";
			    }else{
			        element.style.left = value + "px";
			    }
			}
			function funcY(element,value,min,max){
			    if(value < min){
			        element.style.top = min + "px";
			    }else if(value > max){
			        element.style.top = max + "px";
			    }else{
			        element.style.top = value + "px";
			    }
			}
		window.funcBody = funcBody;
		})(window);
		
		//对要拖动的元素绑定事件 
		function drap_element(e){
			moveFlag=true;
			if(!e){  
		        var e = window.event;  
		    }  
		    //获取事件点击元素  
		    var targ = e.target;
		    //console.log(targ.className);
		    //console.log(targ.className!="list");
		    if(targ.className!="list"){
		    	funcBody.moveElement(targ, document, "xy", 0, 500,function () {});
		    }
		    
		    
			
		}

复制过来后排版有点问题，克服点看吧