JavaScript：带框拖拽

带框的拖拽，拖动红色div时，div先不移动，而是出现一个虚线框，虚线框移动到哪儿，放开鼠标后div就移动到哪儿。效果如下：

总体思路：当鼠标按下时，创建一个虚线框box。鼠标移动时，将坐标赋值给虚线框。鼠标方放开时，将虚线框的坐标赋值给div，随即删除掉虚线框。示例代码如下。

<!DOCTYPE html>
<html>
<head>
	<title>拖拽</title>
<style type="text/css">
	#div1{ height: 200px; width: 200px; background-color: red; position: absolute; }
	.box{ border:1px dashed black; position: absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
	document.oncontextmenu = function(){
		return false;
	}
	var oDiv1 = document.getElementById('div1');

	var disX = 0;
	var disY = 0;

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

		var oBox = document.createElement('div');
		oBox.className = 'box';
		oBox.style.width = oDiv1.offsetWidth+'px';
		oBox.style.height = oDiv1.offsetHeight+'px';
		oBox.style.left = oDiv1.offsetLeft+'px';
		oBox.style.top = oDiv1.offsetTop+'px';
		document.body.appendChild(oBox);
		//当鼠标按下时，创建一个虚线框box,创建的虚线框的位置和div的位置一致。


		document.onmousemove = function(ev){
			var l = ev.clientX - disX;
			var t = ev.clientY - disY;
			if (l<30) {
				l = 0;
			} else if(l>document.documentElement.clientWidth-oDiv1.offsetWidth){
				l = document.documentElement.clientWidth-oDiv1.offsetWidth;
			}
			if (t<30) {
				t = 0;
			} else if(t>document.documentElement.clientHeight-oDiv1.offsetHeight){
				t = document.documentElement.clientHeight-oDiv1.offsetHeight;
			}
			
			oBox.style.left = l + 'px';
			oBox.style.top = t + 'px';
			//鼠标移动时，将坐标赋值给虚线框。
		};

		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;

			oDiv1.style.left = oBox.offsetLeft+'px';
			oDiv1.style.top = oBox.offsetTop+'px';
			document.body.removeChild(oBox);
			//鼠标方放开时，将虚线框的坐标赋值给div，随即删除掉虚线框。
		};
		return false;
	};
};
</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

陈学俊

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

私信关注

JavaScript：带框拖拽

猜你喜欢