jQuery我想做一个，点击新建出来一个div，鼠标按下拖动div也跟着移动，代码哪里错了

答案:2 悬赏:60 手机版

解决时间 2021-01-04 01:37

提问者网友：一抹荒凉废墟
2021-01-03 01:39

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="found" type="button" value="新建">
<span id="aa"></span>
</body>
<script type="text/javascript"src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
t=true;
$("#found").click(function(){
$("body").append("<div id='run'>按住我移动</div>")
$(this).mouseup(function(){
t=false;
})
$("#run").mousedown (function(e){
$(this).mousemove(function(e){
if(t)
{
$("#aa").html(e.pageX+","+ e.pageY)
$(this).css({"left":e.pageX+5+"px","top":e.pageY+5+"px"})
}
})
})
})

</script>
</html>

最佳答案

五星知识达人网友：旧脸谱
2021-01-10 04:39

你的代码中有以下几处问题：
    t=true;
    $("#found").click(function(){
        $("body").append("<div  id='run'>按住我移动</div>")

        // 这里的 this 代表 #found 元素，
        // 所以应该改为 $("#run")
        $(this).mouseup(function(){
            // 只要鼠标松开一次，#run 就不能再被拖动了！只能拖动一次吗？
            t=false;
        })
        $("#run").mousedown (function(e){
            // 每次在 #run 上按下鼠标就会添加一次鼠标移动事件！
          $(this).mousemove(function(e){
              if(t)
              {
                  $("#aa").html(e.pageX+","+ e.pageY)
                  // 下面这句应该改为 X、Y 都减 5
                  $(this).css({"left":e.pageX+5+"px","top":e.pageY+5+"px"})
              }
          })
        })
    })

根据你的要求，我写了一段代码，你可以参考一下：
$("#found").click(function(){
    var t=false, x, y;
    $("body").append(
        $("<div  id='run'>按住我移动</div>")
        .mouseup(function(){
            t=false;
        }).mousedown (function(e){
            x=e.offsetX;
            y=e.offsetY;
            t=true;
        }).mousemove(function(e){
            if(t)
            {
                $("#aa").html(e.pageX+","+ e.pageY)
                $(this).css({"left":e.pageX-x+"px","top":e.pageY-y+"px"})
            }
        })
    )
})

全部回答

1楼网友：上分大魔王
2021-01-10 05:20

额

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！