How to get the position of dragged button

Question

How do I get the coordinate position after using jQuery drag and drop? I want to save the position to a database, so that next time I visit, the item will be in the same position.

    <!doctype html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>jQuery UI Draggable - Default functionality</title>
            <link rel="stylesheet" href="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\themes\base\jquery.ui.all.css">
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\jquery.js"></script>
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\ui\jquery.ui.core.js"></script>
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\ui\jquery.ui.widget.js"></script>
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\ui\jquery.ui.mouse.js"></script>
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\ui\jquery.ui.draggable.js"></script>
            <link rel="stylesheet" href="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\demos\demos.css">
            <style>
            #draggable { width: 150px; height: 150px; padding: 0.5em; }
            </style>
            <script>

        $(function() {
                $( "#draggable" ).draggable({
                cancel: false
            });
            }); 

        $("#draggable").click(function(){
            var x = $("#draggable").position();
            alert("Top: " + x.top + " Left: " + x.left);
        });


           </script>
        </head>
        <body>

        <button type="button" id="draggable" class="ui-widget-content">
            Drag me around
        </button>

        <div class="demo-description">
        <p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
        </div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>
        </body>
        </html>

This has been answered in another post already. See http://stackoverflow.com/questions/4903530/how-to-get-the-position-of-a-draggable-object — Hopfeeyy, Aug 10 '15 at 11:08

score 2 · Accepted Answer · answered Aug 10 '15 at 11:06

$(document).ready(function(){
    $( "#draggable" ).draggable({
                            
                            drag: function(){
                                var offset = $(this).offset();
                                var xPos = offset.left;
                                var yPos = offset.top;
                                $('#posX').val(xPos);
                                $('#posY').val(yPos);
                                
                            }
                           
    });
  });

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable">
  <p>Drag me around</p>
</div>
xpos=<input type="text" id="posX">
Ypos=<input type="text" id="posY">

You have just run the below code and see the results.You can search offset Ui in jquery UI original site

score 0 · Answer 2 · answered Aug 10 '15 at 11:02

Use events. You can view all events in jQuery API:

http://api.jqueryui.com/draggable

If you listen dragstop event you can store the value:

$( ".selector" ).on( "dragstop", function( event, ui ) {
     // top position: ui.position.top
     // left position: ui.position.left
     // top offset: ui.offset.top
     // left offset: ui.offset.top
});

It's all

How to get the position of dragged button

2 Answers2