JS错误记录 - 事件 - 拖拽

 

错误总结：

1. var disX = 0;   现在window.onload里声明变量，而不是在事件oDiv.onmousedown里面声明并赋值。

对于这个还不是很明白。

2. onmousedown事件的主体是oDiv，不是整个窗口。

3. if ... else if ...   两个花括号的中间不可以写分号 ; 。

4. oDiv.style.left = l + 'px';    left 值有px。

5. 写法错误。  可视窗的宽度：  document.documentElement.clientWidth

 

if(l<0)
            {
                l = 0;
            }
            // if(l>oEvent.clientWidth - oDiv.offsetWidth)
            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
            {
                // l = oEvent.clientWidth - oDiv.offsetWidth

                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            };

 

 

<script>

    window.onload = function()
    {
        var oDiv = document.getElementById('div1');

        var disX = 0; // 为什么在这里声明， 且声明变量为 0 ？
        var disY = 0;

        oDiv.onmousedown = function(ev) 
        // 不是点击整个窗口时拖拽， 是点击div的时候拖拽
        {
            var oEvent = ev || event;
            
            disX = oEvent.clientX - oDiv.offsetLeft;
            disY = oEvent.clientY - oDiv.offsetTop;

            //window.onmousemove = function(ev)  // window.onmouseove 和 document.onmousemove 区别？
            document.onmousemove=function (ev)
            {
                var oEvent = ev || event;
                var l = oEvent.clientX - disX   // 变量表示div位置的值
                var t = oEvent.clientY - disY

                // 画图，分成 左边顶格， 右边顶格 两种情况考虑。
                if(l<0)
                {
                    l=0;
                }    //;  // if 和 else if之间的语句不可以写分号 ; 
                
                else if(l>document.documentElement.clientWidth - oDiv.offsetWidth)
                {
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;
                };

                if(t<0)
                {
                    t=0;
                }
                else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
                {
                    t=document.documentElement.clientHeight-oDiv.offsetHeight;
                }

                oDiv.style.left = l + 'px'; // left 值有px
                oDiv.style.top =  t + 'px';
            };

            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };

            return false; // 阻止默认事件，解决火狐浏览器拖拽空div的bug
        };    
    };
    </script>

 

    <script>
    window.onload = function()
    {
      var oDiv = document.getElementById('div1');
      var disX = 0;
      var disY = 0;

      oDiv.onmousedown = function(ev)
      {
          var oEvent = ev||event;
          
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev)
          {
            var oEvent = ev||event;
            var l = oEvent.clientX - disX;
            var t = oEvent.clientY - disY;

            if(l<0)
            {
                l = 0;
            }
            // if(l>oEvent.clientWidth - oDiv.offsetWidth)
            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
            {
                // l = oEvent.clientWidth - oDiv.offsetWidth

                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            };

            if(t<0)
            {
                t = 0;
            }
            else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
            {
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }

            // if(t>oEvent.clientHeight - oDiv.offsetHeight)
            // {
            //     l = oEvent.clientHeight - oDiv.offsetHeight
            // };

            oDiv.style.left = l + 'px';
            oDiv.style.top = t + 'px';
          };

          document.onmouseup = function()
          {
              document.onmousemove = null;
              document.onmouseup = null;
          };

          return false;
      };
    };
    </script>