首页 > 代码库 > div拖动 (快速拖动就不好使了,求改)
div拖动 (快速拖动就不好使了,求改)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div { background-color: #FF00FF; width: 200px; height: 100px; position: absolute; text-align: center; left: 0px; } </style> </head> <body> <div id="div" onclick="stopDiv()"></div> <br> <br> <br> <br> <br> <input type="button" id="b1" value="滑滑滑" onclick="move()"> <input type="button" id="b2" value="停停停" onclick="stopDiv()"> </body> <script type="text/javascript" src="js/TestTimeout.js"> </script> </html>
TestTimeout.js
/** * 实现div拖动的代码 */ var x = 0; var flag = 0; //点击滑滑滑 div滑动 function move() { if (flag == 0) { moveDiv(); } } //点击停停停 div停下 function stopDiv() { clearTimeout(flag); flag = 0; x = parseInt(document.getElementById("div").style.left.split("px")[0]); } //div滑动的实现 function moveDiv() { var div = document.getElementById("div"); x += 2; if (x > 1200) x = 0; div.style.left = x + "px"; flag = setTimeout("moveDiv()", 10); } //下面是div拖动----------- var div1 = document.getElementById("div"); //拖动div 鼠标按下 div1.onmousedown = function(event) { var addx = event.clientX - div1.offsetLeft; var addy = event.clientY - div1.offsetTop; div1.onmousemove = function(event) { div1.style.left = event.clientX - addx + "px"; div1.style.top = event.clientY - addy + "px"; } } //拖动div 鼠标松开 div1.onmouseup = function() { div1.onmousemove = null; }
---恢复内容结束---
div拖动 (快速拖动就不好使了,求改)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。