JS——拖拽封装

最新推荐文章于 2024-06-07 19:20:09 发布

转载最新推荐文章于 2024-06-07 19:20:09 发布 · 342 阅读

文章标签：

#JS 拖拽封装

js 专栏收录该内容

137 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1{
			position: fixed;
			top:100px;
			left: 100px;
			width: 200px;
			height: 200px;
			background: #ddd;
		}
	</style>
</head>
<body>
	<div id="d1">

	</div>
	<script>
		//http://www.zhangxinxu.com/wordpress/2010/03/javascript%E5%AE%9E%E7%8E%B0%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/

		var params = {
			left: 0,
			top: 0,
			currentX: 0,
			currentY: 0,
			flag: false
		};
		//获取相关CSS属性
		var getCss = function(o,key){
			return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; 	
		};

		//拖拽的实现
		var startDrag = function(bar, target, callback){
			if(getCss(target, "left") !== "auto"){
				params.left = getCss(target, "left");
			}
			if(getCss(target, "top") !== "auto"){
				params.top = getCss(target, "top");
			}
			//o是移动对象
			bar.onmousedown = function(event){
				params.flag = true;
				if(!event){
					event = window.event;
					//防止IE文字选中
					bar.onselectstart = function(){
						return false;
					}  
				}
				var e = event;
				params.currentX = e.clientX;
				params.currentY = e.clientY;
			};
			document.onmouseup = function(){
				params.flag = false;	
				if(getCss(target, "left") !== "auto"){
					params.left = getCss(target, "left");
				}
				if(getCss(target, "top") !== "auto"){
					params.top = getCss(target, "top");
				}
			};
			document.onmousemove = function(event){
				var e = event ? event: window.event;
				if(params.flag){
					var nowX = e.clientX, nowY = e.clientY;
					var disX = nowX - params.currentX, disY = nowY - params.currentY;
					target.style.left = parseInt(params.left) + disX + "px";
					target.style.top = parseInt(params.top) + disY + "px";
					if (event.preventDefault) {
						event.preventDefault();
					}
					return false;
				}
				
				if (typeof callback == "function") {
					callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
				}
			}	
		};

	startDrag(d1,d1);
	</script>
</body>
</html>