当前位置：网站首页>A problem -- about dragging div in JS, when I change div to round, there will be a bug

A problem -- about dragging div in JS, when I change div to round, there will be a bug

2022-07-28 15:03:00 【Dream rain in flowers】

An ordinary drag function ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
    
				var box1 = document.getElementById("box1")
				
				box1.onmousedown = function(event){
    
					// var obj = getComputedStyle(box1,null)
					// alert(obj.width)
					
					/* div Horizontal offset of = mouse .clientX -  Elements .offsetLeft div Vertical offset of = mouse .clientY -  Elements .offsetTop */
					var ol = event.clientX - box1.offsetLeft
					var ot = event.clientY - box1.offsetTop
					
					
					
					// alert(" The mouse starts dragging ")
					document.onmousemove = function(event){
    
						//  Follow the effect 
						var x = event.clientX -ol
						var y = event.clientY - ot
						
						box1.style.left = x + "px"
						box1.style.top = y + "px"
					}
					//  Loosen the mouse , Fixed position 
					box1.onmouseup = function(){
    
						// alert(" I released the mouse ")
						//  Cancel document.onmousemove event 
						document.onmousemove = null
						document.onmouseup = null
					}
				}
			}
		</script>
		<style type="text/css">
			#box1{
    
				height: 100px;
				width: 100px;
				background-color: #0c0;
					/*  Turn the square into a circle  */
				/* border-radius: 50s%; */
			
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

Insert picture description here

The blame is on , I feel that this square is a little ugly , So let him pass boeder-rudius: 50% Change to round , You can also drag , You can also drag , But I can't release the mouse and fix it in a new position . Insert picture description here