320模块化开发-拖拽效果(李游精品前端课程笔记)-CFANZ编程社区

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		#div{width: 100px;height: 100px;background: black;position: absolute;left: 0;right: 0;}
		.div{width: 100px;height: 100px;background: red;position: absolute;left: 0;right: 0;}
		div{width: 100px;height: 100px;background: blue;position: absolute;left: 0;right: 0;}
		.active{background: pink;}
	</style>
</head>
<body>
	<div id="div"></div>
	<div class="div"></div>
	<div class="div"></div>
	<div></div>
	<div></div>

	<script type="text/javascript">
		function Drag(option){//储存数据
			this.ele=option.ele;
			this.eleArr=[];
			this.isFlow=option.isFlow==true?true:false;
			this.active=option.mouseDownClass==option.mouseDownClass?option.mouseDownClass:false;

			this.getElement();//获取元素
			this.mousedown()
		};

		Drag.prototype={
			"getElement":function(){//选取元素
				switch(this.ele[0]){
					case "#":
					
					this.eleArr.push(document.getElementById(this.ele.substring(1)));
					console.log(this.eleArr);
					break;
					case ".":
					this.eleNode=document.getElementsByClassName(this.ele.substring(1));
					for(var i=0;i<this.eleNode.length;i++){
						this.eleArr.push(this.eleNode[i]);
					}
					console.log(this.eleArr);
					break;
					default:
					this.eleNode=document.getElementsByTagName(this.ele);
					for(var i=0;i<this.eleNode.length;i++){
						this.eleArr.push(this.eleNode[i]);
					}
					console.log(this.eleArr);


				};
			},

			"mousedown":function(){//按下触发事件
				_this=this;
				for(var i=0;i<this.eleArr.length;i++){
					this.eleArr[i].onmousedown=function(){
						
						if(_this.active){//符合条件，添加class active
							this.className+=" "+_this.active;
						};


						_this.needX=event.clientX-this.offsetLeft;
						_this.needY=event.clientY-this.offsetTop;
						//console.log(_this.needX);
						_this.mousemove(this);//移动触发函数
						_this.mouseup(this);//抬起触发函数
						return false;//可以防止选中其他的文字

					};
				}
			
			},

			"mousemove":function(obj){//移动触发功能的封装
				_this=this;
				document.onmousemove=function(){
					_this.X=event.clientX-_this.needX;
					_this.Y=event.clientY-_this.needY;
					_this.maxX=innerWidth-obj.offsetWidth;
					_this.maxY=innerHeight-obj.offsetHeight;

					if(_this.isFlow){//如果isFlow为ture;
						_this.X=_this.X<0?0:_this.X;
						_this.Y=_this.Y<0?0:_this.Y;
						_this.X=_this.X>_this.maxX?_this.maxX:_this.X;
						_this.Y=_this.Y>_this.maxY?_this.maxY:_this.Y;

					}
					obj.style.left=_this.X+"px";
					obj.style.top=_this.Y+"px";
				}
			},

			"mouseup":function(obj){//抬起事件封装
				_this=this;
				document.onmouseup=function(){
					if(_this.active){//抬起去掉class active
						obj.className=obj.className.replace(" "+_this.active,"");
					}
					this.onmousemove=this.onmouseup=null;
				}
			}


		}


		new Drag({
			"ele":"div",
			"isFlow":false,
			"mouseDownClass":"activ"
			
		});

	</script>

</body>
</html>