js 鼠标拖拽元素

最新推荐文章于 2023-10-17 19:40:46 发布

Pinky_W

最新推荐文章于 2023-10-17 19:40:46 发布

阅读量5.3k

点赞数 1

分类专栏： js学习与思考文章标签：前端 javascript

本文链接：https://blog.csdn.net/pinger1225/article/details/38733577

版权

js学习与思考专栏收录该内容

8 篇文章 0 订阅

订阅专栏

web qq页面上的元素基本都可以拖拽，交互性很强，增强了体验，拖拽功能带来的好处显而易见。

思路：

用户点击元素，然后拖动，实际上是onmousedown和onmousemove两个函数的嵌套。

1、用户点击元素。需要记录到鼠标点击位置的距离，因为在拖动过程中最好是保持鼠标和元素的相对距离，而不是鼠标一直处于元素左上角，用过拖拽应该都能体会。

由于没有斜线的说法，所以是保存横向距离distX和纵向距离distY两个变量。

2、拖动元素。这时候就要发挥之前保存的距离了，元素的位置是由left和top决定的，在运动过程中是不断变化的，是需要我们计算的，计算方法就是：鼠标的位置-元素边距到鼠标的距离。就成功可以拖动了。

3、虽然可以拖动了，但是元素可能会被疯狂的用户拖出可视区，可能就找不到了，所以我们最好加一个限定，不能拖出可视区。

左边距的控制好说，判断使left=0；右边距=0是一个想法，具体的实现还是要根据左边距来控制，首先得到可视区宽度（document.documentElement.clientWidth），减去元素宽度就是元素的left值。

<style type="text/css">
	#div{
		background: red;
		width: 100px;
		height: 100px;
		position: absolute;
	}
</style>

<script type="text/javascript">
	window.οnlοad=function(){
		var oDiv=document.getElementById('div');
		var distX=0;
		var distY=0;
		oDiv.οnmοusedοwn=function(ev){
			var oEvent=ev||event;
			distX=oEvent.clientX-oDiv.offsetLeft;   //获取边界到鼠标的距离
			distY=oEvent.clientY-oDiv.offsetTop;
			document.οnmοusemοve=function(ev){
				var oEvent=ev||event;
				var x=oEvent.clientX-distX;
				var y=oEvent.clientY-distY;
				if(x<0){
					x=0;
				}
				if(y<0){
					y=0;
				}
				if(x>(document.documentElement.clientWidth-oDiv.offsetWidth))
				{
					x=document.documentElement.clientWidth-oDiv.offsetWidth;
				}
				oDiv.style.left=x+'px';    //根据鼠标位置相对定位，得到left，top值
				oDiv.style.top=y+'px';
			}
			document.οnmοuseup=function(){
				document.οnmοusemοve=null;
				document.οnmοuseup=null;
			}
		}
				
	}
</script>