CODEWITHSUNDEEP
javascriptjquery
user3347455
user3347455

Reputation: 51

How to get x and y in dragable jquery

I have a code here which is using dragable from jquery and jquery UI.

<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script src="js/jquery-ui.js"></script>

    <style>
    #draggable, #draggable2, #draggable3 {border: 0px solid black; background-color : transparent; width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script>
    $(function() {
    $( "#draggable" ).draggable();
    $( "#draggable2" ).draggable();
    $( "#draggable3" ).draggable();
    });
    </script>
</head>
<body>
    <div id="draggable" class="ui-widget-content">Test1</div>
    <div id="draggable2" class="ui-widget-content">Test2</div>
    <div id="draggable3" class="ui-widget-content">Test3</div>
</body>
</html>

I need get position corrdinates x and y for each element. I can not find how to get those. Also how to limit dragable place. I mean how to create border that those object will be able to move only inside this border.

Upvotes: 0

Views: 253

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

you want this??

       $("#draggable").draggable({
            start: function (e, ui) {
                var parentOffset = $(this).parent().offset();
                var relX = e.pageX - parentOffset.left;
                var relY = e.pageY - parentOffset.top;
                $("#start").html(" x: " + relX + ", y: " + relY);
            },
            stop: function (e, ui) {
                var parentOffset = $(this).parent().offset();
                var relX = e.pageX - parentOffset.left;
                var relY = e.pageY - parentOffset.top;
                $("#end").html(" x: " + relX + ", y: " + relY);
            },
            drag: function (e, ui) {
                var parentOffset = $(this).parent().offset();
                var relX = e.pageX - parentOffset.left;
                var relY = e.pageY - parentOffset.top;
                $("#current").html(" x: " + relX + ", y: " + relY);
            }

        });

this code will get the coordinates while dragging

Demo

Updated Demo For Container

Upvotes: 4

Related Questions