Javascript实现可拖动的DIV
从前天起就在试图实现一个可根据鼠标拖动而移动的层，到今天中午为止终于实现了，嘿嘿。本来不是件很困难的事情，但是因为我参考了书上的示例代码，而那段代码肯定是有问题的，因此直接导致我在错误的基础代码上一错再错。对于新手来说，本来应该多看别人写的已经成熟的代码胃溃疡吃什么药。但是“尽信书不如无书”啊，我发现这句话真是太对了，再厉害的人写东西也难保万无一失。因此一切还是要靠自己来，虽然初次写比较困难的事情。
我抹掉了原来的别人的代码，自己重新写，用自己的逻辑。调试了一上午，结果运行成功了。一下是代码，比原来的那些简单很多。嘿嘿，成就感啊~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>drag div demo</title>
<style type="text/css">
#dragDiv {
position:absolute;
width:200px;
height:50px;
z-index:1;
left:40px;
top:51px;
background:#eee;
cursor:move;
border:1px solid #80ffff;
text-align:center;
padding-top:5%;
color:#0080c0;
}
#wrap {
height:1000px;
width:1024px;
}
</style>
<script type="text/javascript" src="packageFunction/doEventEncapsulation.js"> </script>
<script type="text/javascript" language="JavaScript">
var dragable=false;
var mousePosition=[];
function mousedownEventHandler(evt)
{
dragable=true;
var evt=evt||event;
var mouseX=(document.body.scrollLeft||document.documentElement.scrollLeft)+evt.clientX;
var mouseY=(document.body.scrollTop||document.documentElement.scrollTop)+evt.clientY;
mousePosition=;
}
function mousemoveEventHandler(evt)
{
if (dragable==true) {
var evt = evt || event;
var mouseX=(document.body.scrollLeft||document.documentElement.scrollLeft)+evt.clientX;
var mouseY=(document.body.scrollTop||document.documentElement.scrollTop)+evt.clientY;
div=document.getElementById('dragDiv');
div.style.left =div.offsetLeft+mouseX-mousePosition+'px';
div.style.top = div.offsetTop+mouseY-mousePosition+'px';
mousePosition=;
}
}
function mouseupEventHandler()
{
dragable=false;
mousePosition=0;
mousePosition=0;
}
function init()
{
var dragDiv=document.getElementById('dragDiv');
var wrap=document.getElementById('wrap');
addEvent(dragDiv,'mousedown',mousedownEventHandler,false);
addEvent(dragDiv,'mousemove',mousemoveEventHandler,false);
addEvent(dragDiv,'mouseup',mouseupEventHandler,false);
}
window.onload=init;
</script>
</head>
<body id="wrap">
<div id="dragDiv">Drag me!</div>
</body>
<script type="text/javascript">
init();
</script>
</html>
实施证明，无论别人的代码如何好，宁愿自己困难的重写，也不要改写别人的。从零开始，是个好的起点。
页:
[1]