javascript原生 别让弹出层拖拽到外面去。 if判断写不好，求指点

Question

http://jsbin.com/hejilomola/edit?html,css,js,output
上面是demo.寻指导 。

        function mousemove(ev){
            if(ev==null) ev=window.event;//IE
//            var xx=$alert.style.left=(ev.clientX-x)+"px";
            var ff=0;
            if($alert.style.left>ff){
                $alert.style.left=(ev.clientX-x)+"px";
            }
//            console.log(xx);
            var yy=$alert.style.top=(ev.clientY-y)+"px";
            console.log(yy)
        }

Answer 1

谢邀

在其他代码不变的情况下，修改拖拽逻辑，楼主试试把这个函数放到你的代码中，应该可以实现你的要求

function drag(obj) {
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    var h = document.documentElement.clientHeight || document.body.clientHeight;
    var disX, disY, maxLeft, maxTop, left, top, tempLeft, tempTop;

    obj.onmousedown = function (ev) {
      maxLeft = (w - obj.offsetWidth);
      maxTop = (h - obj.offsetHeight);
      ev = ev || event;
      disX = ev.clientX - this.offsetLeft;
      disY = ev.clientY - this.offsetTop;

      document.onmousemove = function (ev) {
        ev = ev || event;

        tempLeft = ev.clientX - disX;
        tempTop = ev.clientY - disY;

        if(tempLeft < 0){
          left = 0;
        }else if(tempLeft >= maxLeft){
          left = maxLeft;
        }else{
          left = tempLeft;
        }

        if(tempTop < 0){
          top = 0;
        }else if(tempTop >= maxTop){
          top = maxTop;
        }else{
          top = tempTop;
        }

        obj.style.left = left + 'px';
        obj.style.top = top + 'px';
      }

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

      return false;
    }
   }

   drag(document.getElementById('content'));

Answer 2

 function mousemove(ev){
            if(ev==null) ev=window.event;//IE
            var width=300;
            var height=100;
            var left=(ev.clientX-x);
            var top=(ev.clientY-y);
            var bodyWidth=document.body.clientWidth;
            var bodyHeight=document.documentElement.scrollHeight;
            if(left+width>bodyWidth){
               left=bodyWidth-width;
            }
            if(top+height>bodyHeight){
                top=bodyHeight-height;
            }
            left=(left>0) ? left: 0;
            top=(top>0)? top :0;
            $alert.style.left=(left)+"px";
            $alert.style.top=(top)+"px";
        }