Why can't I use a variable in Jquery Selector?

Question

I tried to write a program in JavaScript using Jquery, in which I can use mouse to drag buttons, source codes are as follow:

<!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>

Now it works well. However when i add 'while' statement into it, only the last button can be dragged

<!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>

So why does it happen, and how can I solve this problem?

score 1 · Answer 1 · answered Jan 19 '16 at 15:37

jQuery UI is probably the better solution, but here's why your script doesn't work:

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

At this point in your execution, i is no longer 1,2,3,4,5. It's 6. i is declared outside your loop and you are trying to use it inside your asynchronous event handler. Put an alert(i) in there and you'll see what I mean: the loop completes before the event is fired, ergo it will have the last value permitted by the loop.

You should be doing this instead:

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

Thank you very much, you completely solved my problem. – Mat Jan 20 '16 at 03:22 — Mat, Jan 20 '16 at 03:22

Matt D. Webb · Answer 2 · 2017-04-19T16:11:47.687

0

You should try 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();
});

edited Apr 19 '17 at 16:11

answered Jan 19 '16 at 15:33

Matt D. Webb

3,216
4
29
51

Why can't I use a variable in Jquery Selector?

2 Answers2