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

<!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 style='width: 200px;height: 200px;background-color:#ccc;position: absolute;' 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>

举报该问题

推荐答案 2015-04-09

你的代码中有以下几处问题：

    t=true;
    $("#found").click(function(){
        $("body").append("<div style='width: 200px;height: 200px;background-color:#ccc;position: absolute;' 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 style='width: 200px;height: 200px;background-color:#ccc;position: absolute;' 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"})
            }
        })
    )
})

追问

已经做好了谢谢

追答

不用谢

温馨提示：答案为网友推荐，仅供参考

当前网址：http://99.wendadaohang.com/zd/Wz7zXetvjz7OBzWeeB.html

相似回答

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎...答：你要的应该是拖拽效果，可以通过jq插件做 http://www.runoob.com/jqueryui/example-draggable.html基本原理就是鼠标按下修改div的left和top（或者right/bottom）。鼠标离开不变。<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><Style>#test{position:absolute;...

你好,我用jQuery ui 拖拽,我想实现拖动某个td,实际上是拖动点它创建出来...答：} div.onmouseup=function(){ console.log("松开"); div.onmousemove = ""; }}</script> 你可以在按下移动的时候创建一个div，然后这个div所在的位置根据你拿到的鼠标clientx,y进行动态改变，然后松开的时候，把这个div删掉，然后实现你的拖拽效果。

jquery--鼠标单击后,页面内添加div元素(始终出不来,我要崩溃了,不知道...答：修改的方法就是在body内部随便定义一个div，然后选中这个div用append()就可以了。

jquery如何实现点击一个按钮 div框从右→左,再点击按钮 div框从刚刚...答：1、新建一个html文件，命名为test.html。2、在test.html文件内，使用div标签创建一行文字，文字内容为“小明”。3、在test.html文件内，设置div标签的id属性为mytext，主要用于下面通过该id获得div对象。4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“切换内容”。5、在test.html文件中...

jquery或JS拖动DIV左右移动答：<html><head><title>jquery或JS拖动DIV左右移动</title><script src="jquery-1.7.1.min.js"></script><style type="text/css"> body {background-color: #fff; } .win {position: absolute; top: 0px; left: 0px;width: 300px;height: 222px;} .title {height: 20px;widt...

用Jquery,如何编写:一个外层DIV,内层一个DIV,如何让内层DIV当鼠标拖动...答：给你发个原生js代码的例子，其实就是简单的onmousedown-onmousemove-onmouseup，限制一下里面div的left和top值 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1{width: 400px;height: 300px;background: #ccc;position: relative;}#div2{width: 100...

JQuery的问题,怎么实现鼠标按下的时候会改变div的样式,当鼠标松开时...答：首先使用鼠标按下事件，按下的时候改变样式，松开的时候使用的是鼠标松开事件，改变的样式是写原来的样式，这样看到的效果就是按下有改变，松开回原样然后再给设置一个鼠标拖动事件，判断点击文字到黑色区域的宽和高的距离，即x轴和y轴，然后做判断，if(拖动的x轴距离 > 自身到x轴距离 || 拖动的y...

jQuery怎么实现改变div边框和拖动div?答：(".show").mousedown(function(e)//e鼠标事件 { (this).css("cursor","move");//改变鼠标指针的形状 var offset = $(this).offset();//DIV在页面的位置 var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 var y = e.pageY - offset.top;//获得鼠标指针离DIV元素...

用jquery使一个按钮让div左右移动怎么办?答：用jquery使一个按钮让div左右移动方法如下：就是点击“#anniu”，然后"#caozuo"div左右移动，我的代码左移了就不能移动回来了 <div class="bottom textstyle" id="caozuo"> <a href="#" id="anniu"><img src="jiantou2.png" width="20" id="tanchu" /></a> </div> $(...

大家正在搜

jquery点击显示隐藏div 点击那个放不出来了 html点击按钮弹出div 点击我的电脑没有出来 div点击事件onclick div点击效果 div点击隐藏设置div不可点击 css点击显示和隐藏div