请问为什么不能实现效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *{
      margin:0;
      padding: 0;
    }
    #main{
      width:200px;
      height:200px;
      background: yellow;
      position: absolute;
      top:100px;
      left:100px;
      -webkit-user-select: none;
    }
  </style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="main">
    我能被拖动
  </div>
    <script type="text/javascript">
      var main=$('#main'),
          move=false,
          page={};
      main.on('mousedown',function(e){
          move=true;
          page.x=e.pageX,
          page.y=e.pageY;

      }).on('mousemove',function(e){
          if(move==true){
          var targetX=parseInt(main.css('left'))+e.pageX-page.x;
          var targetY=parseInt(main.css('top'))+e.pageY-page.y;
          if(targetX >= e.clientX || targetY >=e.clientY){
            move=false;
            console.log(move);
          }
          main.css('left',targetX+'px');
          main.css('top',targetY+'px');
          page.x=e.pageX,
          page.y=e.pageY;
          }
      }).on('mouseup',function(){
          move=false;
          page={};
      })
    </script>
</body>
</html>

请问一下老师问题在哪里？e.clientX不是鼠标相对于浏览器窗口的位置吗我使用

targetX >= e.clientX || targetY >=e.clientY这个判断

当元素移动后的距离大于等于鼠标相对于浏览器窗口的位置的时候move=false为什么不可以实现效果

hy_wang 2018-07-16

源自：HTML5拖拽上传 2-3 编程练习

收起

2回答

好帮手慕糖 2018-07-17 10:41:13

你好，1、clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。而这里鼠标在小块上，targetX是小块距最最左边的为位置，所以这里是会一直小于e.clientX的哦。

2、关于你的第二段代码，这里使用jquery方法，直接使用$(document).width()即可。

3、最后输出不对是因为拼接有问题，这里不是个变量，是一个表达式，建议：可以使用变量接收下，例：

4、建议：变为false之后，可以添加一个return，就不往下执行了，否则还会在赋值一次哦。

5、这样只解决了右边以及下边，但是上边以及左边还是可以超出哦，建议：可以把左边与上边也进行判断下。

若能解决你的疑问，望采纳。

祝学习愉快~

收起回答

提问者 hy_wang 2018-07-16 23:38:42

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *{
      margin:0;
      padding: 0;
    }
    #main{
      width:200px;
      height:200px;
      background: yellow;
      position: absolute;
      top:100px;
      left:100px;
      -webkit-user-select: none;
    }
  </style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="main">
    我能被拖动
  </div>
    <script type="text/javascript">
      var main=$('#main'),
          move=false,
          page={};
      main.on('mousedown',function(e){
          move=true;
          page.x=e.pageX,
          page.y=e.pageY;

      })
      $(document).on('mousemove',function(e){
          if(move==true){
          var targetX=parseInt(main.css('left'))+e.pageX-page.x;
          var targetY=parseInt(main.css('top'))+e.pageY-page.y;
          if(targetX >= (document.body.clientWidth-main.width()) || targetY >= (document.body.clientHeight-main.height()) ){
            console.log(move);
            console.log(targetY+','+document.body.clientHeight-main.height());
            move=false;
            
          }
          main.css('left',targetX+'px');
          main.css('top',targetY+'px');
          page.x=e.pageX,
          page.y=e.pageY;
          }
      }).on('mouseup',function(){
          move=false;
          page={};
      })
    </script>
</body>
</html>

请问老师我修改过后为什么不行 (document.body.clientHeight-main.height())为什么是NaN？？

收起回答