拖动不了~

<!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 Move=false;
    var last={};
    $("#main").on("mousedown",function(e){
        Move=true;
        last.x=e.pageX;
        last.y=e.pageY;
    }).on("mousemove",function(e){
        if(Move && $("main").top+$("main").height<window.height){
            var targetX=parseInt($("main").css("left"))+e.pageX-last.x;
            var targetY=parseInt($("main").css("top"))+e.pageY-last.y;
            $("main").css("left",targetX+"px");
            $("main").css("top",targetY+"px");
            last.x=e.pageX;
            last.y=e.pageY;
        }
    }).on("mouseup",function(){
        Move=false;
        last={}
    })
    </script>
</body>
</html>

weixin_慕哥8086897 2019-03-30

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

收起

2回答

好帮手慕星星 2019-04-01 09:44:47

你好，之前给同学已经粘贴过修改后的代码了，还是修改不正确：

1、要把if判断条件放在设置元素定位的前面，这样元素就不会超出区域了。

2、获取main元素的时候有两个地方还是没有添加#。

参考修改：

3、targetX是元素在移动过程中需要定位的left值，targetY是元素在移动过程中需要定位的top值。

自己可以再测试下。

收起回答

提问者 weixin_慕哥8086897 #1

if那个是超出窗口 else if targetY<0是什么意思

2019-04-01 09:50:45
好帮手慕星星回复提问者 weixin_慕哥8086897 #2

元素超出浏览器视口顶部的判断，如果元素定位top<0的话，就让定位top设置为0即可。

2019-04-01 09:54:50

好帮手慕星星 2019-03-31 11:29:39

你好，代码中的问题：

1、在mousemove事件中判断条件建议分开写，因为目前只判断垂直方向最底部的，垂直方向顶部和左右方向是没有判断的。

2、获取main元素是$("#main")，前面需要添加#选择器。

3、获取window的高度，应该使用$(window).height()。

4、建议将mousemove和mouseup事件绑定在document页面上，这样可以防止鼠标移动过快，在其他地方抬起，再次移入元素的时候造成错误。

可以参考下面修改的代码：

<!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 Move = false;
    var last = {};
    $("#main").on("mousedown", function(e) {
        Move = true;
        last.x = e.pageX;
        last.y = e.pageY;
    })
    $(document).on("mousemove", function(e) {

        if (Move) {
            var targetX = parseInt($("#main").css("left")) + e.pageX - last.x;
            var targetY = parseInt($("#main").css("top")) + e.pageY - last.y;
            if (targetY + $("#main").height() >= $(window).height()) {
                targetY = $(window).height() - $("#main").height();
            } else if (targetY < 0) {
                targetY = 0
            }
            if (targetX + $("#main").width() >= $(window).width()) {
                targetX = $(window).width() - $("#main").width();
            } else if (targetX < 0) {
                targetX = 0
            }
            $("#main").css("left", targetX + "px");
            $("#main").css("top", targetY + "px");
            last.x = e.pageX;
            last.y = e.pageY;
        }
    }).on("mouseup", function() {
        Move = false;
        last = {}
    })
    </script>
</body>

</html>

自己可以重新测试下，祝学习愉快！

欢迎采纳~

收起回答

提问者 weixin_慕哥8086897 #1

老师 targetX是什么意思还有还是移动不了 css不黏贴上了超出1500字了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> <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 Move=false; var last={}; $("#main").on("mousedown",function(e){ Move=true; last.x=e.pageX; last.y=e.pageY; }) $(document).on("mousemove",function(e){ if(Move){ var targetX=parseInt($("main").css("left"))+e.pageX-last.x; var targetY=parseInt($("main").css("top"))+e.pageY-last.y; $("#main").css("left",targetX+"px"); $("#main").css("top",targetY+"px"); if (targetY + $("#main").height() >= $(window).height()) { targetY = $(window).height() - $("#main").height(); } else if (targetY < 0) { targetY = 0 } if (targetX + $("#main").width() >= $(window).width()) { targetX = $(window).width() - $("#main").width(); } else if (targetX < 0) { targetX = 0 } last.x=e.pageX; last.y=e.pageY; } }).on("mouseup",function(){ Move=false; last={} }) </script> </body> </html>

2019-04-01 09:18:50