用JavaScript编写一段代码，将浏览器中的任意图片或者其他元素进行随意拖拽，并可以随意拖拽到想要拖到的位置。

本文链接：https://blog.csdn.net/mddgxz/article/details/115249760

>>>>>将元素和图片进行随意拖拽，并且考虑到兼容性，将浏览器的兼容问题也进行了解决。<<<<<

--------------只将一个元素div进行拖拽------------

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width:200px;
				height: 200px;
				background-color: #00FFFF;
				position: absolute;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				top: 200px;
				left: 300px;	 
			}
			
		</style>
		<script>
			
			/*总共有三个事件
			   --当鼠标按下时为onmousedown
			   --当鼠标移动时为onmousemove
			   --当鼠标松开时为onmouseup
			*/ 
			window.onload=function(){
				
				var box1=document.getElementById("box1");
				// 给box1绑定一个鼠标按下事件
				box1.onmousedown=function(event){
					
					// 鼠标的坐标-box1.offsetleft
					//解决鼠标图标位置问题
					var ol=event.clientX-box1.offsetLeft;
					var ot=event.clientY-box1.offsetTop;
					// 设置box1捕获所有鼠标按下的事件
					// 但这个方法只有在IE8中使用，为了兼容性
					// box1.setCapture();
					/*判断一下浏览器中是否有这个方法
					if(box1.setCapture){
						box1.setCapture();
					 }
					*/
					 // 这种写法方法比较简单
					box1.setCapture && box1.setCapture();
					// 给文本绑定一个鼠标移动事件
					document.onmousemove=function(event){
						evnet=event||window.event;
						// 获取鼠标的坐标
						var x=event.clientX - ol;
						var y=event.clientY - ot;
						// 获取box1的位置
						box1.style.left=x+"px";
						box1.style.top=y+"px";
					};
					// 为document绑定一个鼠标松开事件
					document.onmouseup=function(){
						document.onmousemove=null;
						document.onmouseup=null;
						// 在鼠标松下时消除所有捕获
						// if(box1.releaseCapture){
						// 	box1.releaseCapture();
						// }						
						box1.releaseCapture && box1.releaseCapture();	
					};
					// 清除默认样式
					return false;
				};
			};
		</script>
	</head>
	<body>
		我是一段文字
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

---->这里写了一个id为box2的div元素，为了更好的进行拖拽，若只给id为box1的div设置鼠标松开事件时，则如果box1和box2有重合时，因为有box2挡着，就不能再将box1进行拖拽，所以在代码中，将给box1设置的onmouseup事件，改成了给document设置onmouseup事件，这个问题就解决啦<--------

还有一个小细节，若鼠标在点击时，鼠标图标会自动跑到box1的左上角，代码中也有解决哦！

在这里插入图片描述这张图片就是解决鼠标图标位置问题的原理图，黑色点表示鼠标的位置，根据鼠标的所在位置的横坐标clientX减去box1的左侧间距就等于box1的偏移量。

var ol=event.clientX-box1.offsetLeft;//横坐标
var ot=event.clientY-box1.offsetTop;//纵坐标

就是这两句代码的意思。

----------------若将多个元素以及图片进行随意拖拽时------------------

**只需要创建一个函数并进行传参就可以了，传入自己想到拖动的元素即可。。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width:200px;
				height: 200px;
				background-color: #00FFFF;
				position: absolute;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				top: 200px;
				left: 300px;	 
			}
			
		</style>
		<script>
			
			window.onload=function(){
				
				var box1=document.getElementById("box1");
				var box2=document.getElementById("box2");
				var img1=document.getElementById("img1");
				drag(box1);
				drag(box2);
				drag(img1);
			
			};
			// 当为多个元素设置拖动时
			/*
			创建一个函数
			*/
		   function drag(ele){
				ele.onmousedown=function(event){
			   	var ol=event.clientX-ele.offsetLeft;
			   	var ot=event.clientY-ele.offsetTop;
			  
			   	ele.setCapture && ele.setCapture();
			   	// 给文本绑定一个鼠标移动事件
			   	document.onmousemove=function(event){
			   		evnet=event||window.event;
			   		// 获取鼠标的坐标
			   		var x=event.clientX - ol;
			   		var y=event.clientY - ot;
			   		
			   		ele.style.left=x+"px";
			   		ele.style.top=y+"px";
			   	};
			   	// 为document绑定一个鼠标松开事件
			   	document.onmouseup=function(){
			   		document.onmousemove=null;
			   		document.onmouseup=null;
			   							
			   		ele.releaseCapture && ele.releaseCapture();	
			   	};
			   	// 清除默认样式
			   	return false;
			   };			   
		   }
		</script>
	</head>
	<body>
		我是一段文字
		<div id="box1"></div>
		<div id="box2"></div>
		<!-- 一定要给图片要开启绝对定位 -->
		<img src="img/2.jpg" id="img1" style="position: absolute;"/>
	</body>
</html>