JS实现拖拽效果------Sestid

客官°小女子只卖身不卖艺 2024-04-18 10:50 79阅读 0赞

## 实现拖拽效果的实现思路以及演示代码： ##

### 实现思路： ###

1、在CSS中设置你要进行拖拽的图片或者元素的样式  
2、在JS中获取元素，以及他的宽高和浏览器的宽高  
3、在要被拖拽的元素上绑定鼠标按下事件  
4、阻止浏览器默认行为  
5、获取光标在元素按下时的坐标  
6、绑定元素移动事件  
7、获取光标在可视窗口的坐标  
8、计算拖动的图片定位位置  
9、判断是否在窗口范围内  
10、设置拖动过程中图片的定位  
11、绑定鼠标弹起事件

### 演示代码： ###

要被拖拽的元素或者图片.onmousedown = function() {
    	//获取光标在事件源元素坐标系中的坐标
    	/* 。。。获取坐标的代码。。。 */
    	document.onmousemove = function() {
    		/* 。。。获取光标在可见视口中的坐标。。。 */
    		//而后利用光标在可视窗口的坐标减去光标在拖动的事件源元素坐标系中的坐标，计算出拖动元素的定位位置。
    		//而后设置CSS样式中的定位
    	}
    	document.onmouseup = function() {
    		取消mousemove事件的绑定
    	}
    }

### 实现让图片在浏览器可视窗口内移动： ###

html,css,js完整代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		#box {
    			width: 200px;
    			height: 200px;
    			background: orange;
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    	</style>
    </head>
    <body>
    	
    	<div id="box"></div>
    	
    	<script>
    		//待拖拽的元素
    		let _img = document.getElementById('box');
    		//获取元素与浏览器的宽高
    		let winWidth = window.innerWidth,
    			winHeight = window.innerHeight,
    			imgWidth = _img.offsetWidth,
    			imgHeight = _img.offsetHeight;
    		//在待拖拽的元素上绑定鼠标按下事件
    		_img.onmousedown = function(event) {
    			//兼容IE
    			event = event || window.event;
    			//阻止浏览器默认行为兼容IE的写法
    			event.preventDefault ? event.preventDefault() : event.returnValue = false;
    			//记录光标在图片按下时的坐标
    			let _offsetX = event.offsetX,
    				_offsetY = event.offsetY;
    			//绑定鼠标移动事件
    			document.onmousemove = function(event) {
    				//获取光标在可视窗口中的坐标
    				let _x = event.clientX,
    					_y = event.clientY;
    				//计算拖动的图片的定位的位置
    				let _left = _x - _offsetX,
    					_top = _y - _offsetY;
    				//判断是否在窗口范围内
    				if (_top < 0) {	//上
    					_top = 0;
    				} else if (_top >= winHeight - imgHeight) {	//下
    					_top = winHeight - imgHeight;
    				}
    				if (_left < 0) {	//左
    					_left = 0;
    				} else if (_left >= winWidth - imgWidth) {		//右
    					_left = winWidth - imgWidth;
    				}
    				//设置拖动过程中图片的定位
    				_img.style.top = _top + 'px';
    				_img.style.left = _left + 'px';
    			}
    			//绑定鼠标弹起事件
    			document.onmouseup = function() {
    				document.onmousemove = null;
    			}
    		}
    	</script>
    </body>
    </html>