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

最简洁的js鼠标拖曳效果【原】

2011-08-16 13:16 295 查看

请原谅我是一个标题档，不过还是很简洁的，因为只是初步的实现的拖曳效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>DragDrop</title>
<meta name="author" content="flowerszhong">
<meta name="date" content="">
<link href="" rel="stylesheet" type="text/css" />


<style type="text/css">
.redBorderBox
{
border: 2px solid red;
position: absolute;
width: 60px;
height: 60px;
cursor: move;
background-color: Red;
}
</style>
</head>
<body>
<div id="hd">
</div>
<div id="bd">
<div class="redBorderBox" id="dragObj1">
i am not dragObj</div>
<div class="redBorderBox dragObj" id="dragObj2" style="top: 90px; left: 90px;">
u can drag me</div>
</div>
<div id="ft">
</div>
</body>

<script>
/* 鼠标拖动 */
(function() {
var oDrag = "";
var ox, oy, nx, ny, dy, dx;
function drag(e) {
var e = e ? e : event;
oDrag = e.target ? e.target : e.srcElement;
if (oDrag.className.indexOf("dragObj") == -1) { oDrag = ""}
ox = e.clientX;
oy = e.clientY;
}
function dragPro(e) {
if (oDrag != "") {
var e = e ? e : event;
dx = parseInt(oDrag.style.left);
dy = parseInt(oDrag.style.top);
nx = e.clientX;
ny = e.clientY;
oDrag.style.left = (dx + (nx - ox)) + "px";
oDrag.style.top = (dy + (ny - oy)) + "px";
ox = nx;
oy = ny;
}
}
document.onmousedown = function(e) { drag(e); }
document.onmouseup = function() { oDrag = ""; }
document.onmousemove = function(event) { dragPro(event); }
})();
</script>

</html>
感谢你留言，转载请声明出处：http://www.cnblogs.com/flowerszhong

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航