how to get image positioning using draggable

Question

how can I get through a scale input (left and top) of positioning the image that is being moved with draggable.

The purpose of this doubt is so that you can save in the Database using PHP and Mysql, the desirable positioning of the image.

Below attached part of the code used. If anyone can help, I’d appreciate it. Already my thanks for the attention of friends.

Code used:

<link rel="shortcut icon" href="../images/favicon.ico" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<style>
#draggable { width: auto; height: auto; padding: 0.5em; }
</style>
<script>
    $(function() {
        $( "#draggable" ).draggable();

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

    });

</script>

<div class="draggable">

<img src="../../upload/portuga_logo.png" id="draggable" class="ui-draggable ui-draggable-handle" style="cursor: move; position: relative; left: 2px; top: 5px;" />

</div>

Answer 1

You need to pass an object to that method with the callback to run the code you want.

Here an example of the documentation of the plugin:

$("#draggable").draggable({
      start: function() {
        // correr código aqui...
      },
      drag: function() {
        // correr código aqui...
      },
      stop: function() {
        // correr código aqui...
      }
});

In this example you have 3 different moments that you can download and run code when this event happens.

To know the position you can use so within these functions:

var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;

Example: http://jsfiddle.net/2rf3mxfg/