how to get image placement using draggable

Navigation
1

How can I get through an input (left and top) scaling of the image being moved with the draggable.

The purpose of this question is to allow you to save in the Database using PHP and Mysql, the desirable positioning of the image.

Below is part of the code used. If anyone can help, I will be very grateful. Thanks in advance for the attention of your 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>

    
asked by anonymous 12.04.2015 / 22:13

1 answer

1

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

Here's an example of the plugin documentation : 

$("#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 hide and run code when this event happens.

To know the position you can use this way within these functions: 

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

Example: link

    
12.04.2015 / 22:25
Place date on file generated by mysqldump Triggers in PHP