Javascript实现可拖动的DIV

tuyao · 发表于 2010 年 11 月 14 日 14:56:31

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册

×

从前天起就在试图实现一个可根据鼠标拖动而移动的层，到今天中午为止终于实现了，嘿嘿。本来不是件很困难的事情，但是因为我参考了书上的示例代码，而那段代码肯定是有问题的，因此直接导致我在错误的基础代码上一错再错。对于新手来说，本来应该多看别人写的已经成熟的代码胃溃疡吃什么药。但是“尽信书不如无书”啊，我发现这句话真是太对了，再厉害的人写东西也难保万无一失。因此一切还是要靠自己来，虽然初次写比较困难的事情。
　　我抹掉了原来的别人的代码，自己重新写，用自己的逻辑。调试了一上午，结果运行成功了。一下是代码，比原来的那些简单很多。嘿嘿，成就感啊~
<!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=[mouseX,mouseY];
                     }
                     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[0]+'px';
                                    div.style.top = div.offsetTop+mouseY-mousePosition[1]+'px';
                                    mousePosition=[mouseX,mouseY];
                              }
                     }
                     function mouseupEventHandler()
                     {
                              dragable=false;
                              mousePosition[0]=0;
                              mousePosition[1]=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>
　　　　实施证明，无论别人的代码如何好，宁愿自己困难的重写，也不要改写别人的。从零开始，是个好的起点。

账号		自动登录	找回密码
密码			注册

[转贴] Javascript实现可拖动的DIV

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。