Question

我尝试使用Jquery在JavaScript中编写程序，我可以使用鼠标拖动按钮，源代码如下：

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var i = 1
    //        while (i < 6) {
            $("#c"+i).mousedown(function(e) {
                var isMove = true
                var px = e.pageX
                var py = e.pageY
                x = parseInt($("#c"+i).css("right"))
                y = parseInt($("#c"+i).css("bottom"))
                $(document).mousemove(function(e) {
                    if (isMove) {
                        $("#c"+i).css({
                            "right" : "" + (x - (e.pageX - px)) + "px", 
                            "bottom" : "" + (y - (e.pageY - py)) + "px"
                        })
                    }
                }).mouseup(function() {
                    isMove = false
                })
            })
     //       i++
     //       }
        })
    </script>
    <style type="text/css">
        .cell {
            position: relative;
            right: -100px;
            bottom: -100px;
            background-color: royalblue;
            width: 40px;
            height: 40px;
            border-radius: 5px;
            -webkit-box-shadow: 1px 1px 5px #666666;
            -webkit-user-select: none;
            margin: 10px;
            display: inline-block;
        }
        .panel {
            -webkit-user-select: none;
        }
    </style>
    <body>
        <div class="panel">
            <div class="cell" id="c1"></div>
            <div class="cell" id="c2"></div>
            <div class="cell" id="c3"></div>
            <div class="cell" id="c4"></div>
            <div class="cell" id="c5"></div>
        </div>
    </body>
</html>

现在效果很好。但是当我添加＆＃39;而＃39;声明到它，只能拖动最后一个按钮

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var i = 1
            while (i < 6) {
            $("#c"+i).mousedown(function(e) {
                var isMove = true
                var px = e.pageX
                var py = e.pageY
                x = parseInt($("#c"+i).css("right"))
                y = parseInt($("#c"+i).css("bottom"))
                $(document).mousemove(function(e) {
                    if (isMove) {
                        $("#c"+i).css({
                            "right" : "" + (x - (e.pageX - px)) + "px", 
                            "bottom" : "" + (y - (e.pageY - py)) + "px"
                        })
                    }
                }).mouseup(function() {
                    isMove = false
                })
            })
            i++
            }
        })
    </script>
    <style type="text/css">
        .cell {
            position: relative;
            right: -100px;
            bottom: -100px;
            background-color: royalblue;
            width: 40px;
            height: 40px;
            border-radius: 5px;
            -webkit-box-shadow: 1px 1px 5px #666666;
            -webkit-user-select: none;
            margin: 10px;
            display: inline-block;
        }
        .panel {
            -webkit-user-select: none;
        }
    </style>
    <body>
        <div class="panel">
            <div class="cell" id="c1"></div>
            <div class="cell" id="c2"></div>
            <div class="cell" id="c3"></div>
            <div class="cell" id="c4"></div>
            <div class="cell" id="c5"></div>
        </div>
    </body>
</html>

那为什么会发生，我该如何解决这个问题？

Answer 1

jQuery UI可能是更好的解决方案，但这就是你的脚本不起作用的原因：

    x = parseInt($("#c"+i).css("right"))
    y = parseInt($("#c"+i).css("bottom"))

在执行的这一点上，i不再是1,2,3,4,5。它是6. i在循环之外声明，并且您尝试在异步事件处理程序中使用它。在那里放一个alert(i)，你会看到我的意思：在事件被触发之前循环完成，它将具有循环允许的最后一个值。

你应该这样做：

    x = parseInt($(this).css("right"))
    y = parseInt($(this).css("bottom"))

Answer 2

您应该尝试jQuery UI See here

<强> HTML

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

<强> CSS

#draggable { width: 150px; height: 150px; padding: 0.5em; }

<强>的jQuery

$(function() {
    $( "#draggable" ).draggable();
});

为什么我不能在Jquery Selector中使用变量？

2 个答案: