JavaScript：页面内拖动、解决页面内拖动选中文字的问题

之前是在整个html文档中拖动div块，现在给div块加一个父级div，在父级div中拖动子div，如下：

仅需在之前的基础上修改if判断语句中的可视区宽度。

		document.onmousemove = function(ev){
			var l = ev.clientX - disX;
			var t = ev.clientY - disY;
			if (l<30) {
				l = 0;
			} else if(l>oDiv2.offsetWidth-oDiv1.offsetWidth){
				l = oDiv2.offsetWidth-oDiv1.offsetWidth;
			}//div块不超出左右两边，oDiv2.offsetWidth是div2可视区的宽度
			if (t<30) {
				t = 0;
			} else if(t>oDiv2.offsetHeight-oDiv1.offsetHeight){
				t = oDiv2.offsetHeight-oDiv1.offsetHeight;
			}//div块不超出上下两边，oDiv2.offsetHeight是div2可视区的高度
			
			oDiv1.style.left = l + 'px';
			oDiv1.style.top = t + 'px';
		};

完整实例：

<!DOCTYPE html>
<html>
<head>
	<title>拖拽</title>
<style type="text/css">
	#div1{ height: 100px; width: 100px; background-color: red; position: absolute; }
	#div2{ height: 600px; width: 800px; background-color: gray; position: relative; }
</style>
<script type="text/javascript">
window.onload = function(){
	document.oncontextmenu = function(){
		return false;
	}
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');

	var disX = 0;
	var disY = 0;

	oDiv1.onmousedown = function(ev){
		disX = ev.clientX - oDiv1.offsetLeft;
		disY = ev.clientY - oDiv1.offsetTop;

		document.onmousemove = function(ev){
			var l = ev.clientX - disX;
			var t = ev.clientY - disY;
			if (l<30) {
				l = 0;
			} else if(l>oDiv2.offsetWidth-oDiv1.offsetWidth){
				l = oDiv2.offsetWidth-oDiv1.offsetWidth;
			}//div块不超出左右两边，oDiv2.offsetWidth是div2可视区的宽度
			if (t<30) {
				t = 0;
			} else if(t>oDiv2.offsetHeight-oDiv1.offsetHeight){
				t = oDiv2.offsetHeight-oDiv1.offsetHeight;
			}//div块不超出上下两边，oDiv2.offsetHeight是div2可视区的高度
			
			oDiv1.style.left = l + 'px';
			oDiv1.style.top = t + 'px';
		};

		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
		return false;
	};
};
</script>
</head>
<body>ajsoigjiagioanreihirea
<div id="div2">
	jloajosjog[adgoiaog]
	<div id="div1"></div>
</div>

</body>
</html>

最后加上一个return false语句，可以解决页面内拖动时选中文字的问题。

下面if判断是为了增加吸附功能，当div1靠近div2的边框距离小于30个像素时，直接将距离置为零。

陈学俊

发布了126 篇原创文章 · 获赞 7 · 访问量 1万+

私信关注

JavaScript：页面内拖动、解决页面内拖动选中文字的问题

猜你喜欢