首页 > 代码库 > Js 拖动效果
Js 拖动效果
<!DOCTYPE html><html><head> <meta charset="utf8"> <title>js拖拽效果</title> <style type="text/css"> #div1 { width : 200px; height: 200px; position: absolute; background: #99dd33; cursor: move; } </style></head><body> <div id="div1"></div></body><script type="text/javascript"> window.onload = function() { var disX = disY = 0; // 鼠标距离div的左距离和上距离 var div1 = document.getElementById("div1"); // 得到div1对象 // 鼠标按下div1时 div1.onmousedown = function(e) { var evnt = e || event; // 得到鼠标事件 disX = evnt.clientX - div1.offsetLeft; // 鼠标横坐标 - div1的left disY = evnt.clientY - div1.offsetTop; // 鼠标纵坐标 - div1的top // 鼠标移动时 document.onmousemove = function(e) { var evnt = e || event; var x = evnt.clientX - disX; var y = evnt.clientY - disY; var window_width = document.documentElement.clientWidth - div1.offsetWidth; var window_height = document.documentElement.clientHeight - div1.offsetHeight; x = ( x < 0 ) ? 0 : x; // 当div1到窗口最左边时 x = ( x > window_width ) ? window_width : x; // 当div1到窗口最右边时 y = ( y < 0 ) ? 0 : y; // 当div1到窗口最上边时 y = ( y > window_height ) ? window_height : y; // 当div1到窗口最下边时 div1.style.left = x + "px"; div1.style.top = y + "px"; }; // 鼠标抬起时 document.onmouseup = function() { document.onmousemove =null; document.onmouup = null; }; return false; }; };</script></html>
Js 拖动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。