JS实现鼠标可拖拽窗口

原创于 2019-01-02 22:22:57 发布 · 753 阅读

2 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

JavaScript 专栏收录该内容

36 篇文章

订阅专栏

HTML结构：

<div class="modal-content" id="imgModalId">
	<div class="modal-header" data-ng-mousedown="selectTarget($event)">
		<button type="button" class="close" data-ng-click="closeImgSearchBtn()">&times;</button>
		<h4 class="modal-title">标题</h4>
	</div>
	<div class="modal-body">
		
	</div>
</div>

CSS：

#imgModalId{
	width: 342px;
	position: absolute;
	left: 500px;
	top: 200px;
	display: none;
	z-index: 9999;
}

JS：

/**
 * 点击选中拖拽对象
 */
$scope.selectTarget = function(event){
	var event = event || window.event;
	var box = document.getElementById("imgModalId");
	//鼠标和弹窗框位置的差值
	var x = event.clientX - box.offsetLeft;
	var y = event.clientY - box.offsetTop;
	document.onmousemove = function(event){
		var event = event || window.event;
		//弹窗的新位置
		var left = event.clientX-x;
		var top = event.clientY-y;
		//防止弹窗移动出去
		if(left < 0){
			left = 0;
		}else if(left >　document.documentElement.clientWidth-box.offsetWidth){
			left =　document.documentElement.clientWidth-box.offsetWidth;
		}
		if(top<0){
			top = 0;
		}else if(top>document.documentElement.clientHeight-box.offsetHeight){
			top =　document.documentElement.clientHeight-box.offsetHeight;
		}
		//css样式默认margin-top: 200px，margin-left: 500px，所以要减去
		box.style.left = left-500 + 'px';
		box.style.top = top-200 + 'px';
	};
	document.onmouseup = function(){
		document.onmousemove = null;
		document.onmouseup = null;
	};
	return false;
};