您的位置：首页 > Web前端 > JavaScript

javascript鼠标拖拽的那些事情

2015-04-14 10:13 204 查看 
<html>
<head>
<title>javascript鼠标拖拽的那些事情</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript"><!--
var dragging = false;
var test;
var mouseY;
var mouseX;
//初始化
window.onload = function(){
test = document.getElementById("test");
//绑定拖拽元素
test.onmousedown = down;
//鼠标在元素内按下触发down事件
test.onmousemove = move;
//鼠标在元素内移动触发move事件
document.onmouseup = up;
//鼠标松开触发up事件
test.style.position = "relative";
test.style.top = "0px";
test.style.left = "0px";
//定义css
}
function down(event)
{
event = event || window.event;
dragging = true;
mouseX = parseInt(event.clientX);
mouseY = parseInt(event.clientY);
objY = parseInt(test.style.top);
objX = parseInt(test.style.left);
}
function move(event){
event = event || window.event;
if(dragging == true){
var x,y;
y = event.clientY - mouseY + objY;
x = event.clientX - mouseX + objX;
test.style.top = y + "px";
test.style.left = x + "px";
}
}
function up(){
dragging = false;
}
// -->
</script>
<div id="test" style="border:1px solid ccc; color:#fff; width:200px; background:#000; padding:10px;">
<p>一点点白</p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航