javascript元素拖拽效果的实现

Dear 丶 2021-07-26 15:38 494阅读 0赞

主要涉及三个鼠标事件 mousedown,onmousemove和onmouseup  
注意：onmouseup绑定在document对象上，因为释放鼠标时，有可能鼠标不在拖动的元素上

*  鼠标事件1 - 在标题栏上按下(要计算鼠标相对拖拽元素左上角的坐标，并且标记元素为可拖动)
 *  鼠标事件2 - 鼠标移动时(要检测，元素是否可标记为移动，如果是，则更新元素的位置到当前鼠标的位置\[要减去第一步中获得的偏移\])
 *  鼠标事件3 - 鼠标松开的时候(标记元素为不可拖动即可)

<!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>鼠标拖拽元素实现</title>
    		<style type="text/css"> #draggable { width: 100px; height: 100px; position: absolute; top: 100px; left: 100px; border: 1px solid #ccc; background: #eee; padding: 10px; cursor: default; } </style>
    	</head>
    	<body>
    
    		<div id="draggable">拖我</div>
    
    		<script type="text/javascript"> var oDrag = document.getElementById('draggable'); var isDraging = false; var startX = 0; var startY = 0; oDrag.addEventListener('mousedown', function(e) { //鼠标事件1 - 在标题栏按下（要计算鼠标相对拖拽元素的左上角的坐标 ，并且标记元素为可拖动） var e = e || window.event; mouseOffsetX = e.pageX - oDrag.offsetLeft; mouseOffsetY = e.pageY - oDrag.offsetTop; isDraging = true; }) document.onmouseup = function(e) { //鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动） isDraging = false; } document.onmousemove = function(e) { //鼠标事件2 - 鼠标移动时（要检测，元素是否标记为移动） var e = e || window.event; var mouseX = e.pageX; //鼠标当前的位置 var mouseY = e.pageY; var moveX = 0; //浮层元素的新位置 var moveY = 0; if (isDraging === true) { moveX = mouseX - mouseOffsetX; moveY = mouseY - mouseOffsetY; // 范围限定 moveX>0 并且 moveX < (页面最大宽度-浮层的宽度) // moveY>0 并且 moveY < (页面最大高度-浮层的高度) //页面宽高 var pageWidth = document.documentElement.clientWidth; var pageHeight = document.documentElement.clientHeight; //图层宽高 var dialogWidth = oDrag.offsetWidth; var dialogHeight = oDrag.offsetHeight; var maxX = pageWidth - dialogWidth; var maxY = pageHeight - dialogHeight; var moveX = Math.min(maxX, Math.max(0, moveX)); var moveY = Math.min(maxY, Math.max(0, moveY)); oDrag.style.left = moveX + 'px'; oDrag.style.top = moveY + 'px'; } }; </script>
    	</body>
    </html>