Reset images position with saved coordinates using jQuery Draggable.

Question

I implemented draggable image using jQuery-ui Draggable and saved coordinates into database.

Now I am getting coordinates and images url in xml format.

I want to reset the image position. where it was saved.

============= Here is source code:=============

$.ajax({
             type: "GET",
             url: "devices.xml",
             dataType: "xml",
             success: function(xml) {
                 $(xml).find('device').each(function(){
                    var idText = $(this).attr('id');
                    var longAddress = $(this).find('longAddress').text();
                    var imgSrc = $(this).find('type').text();
                    var xAxis = $(this).find('x-axis').text();
                    var yAxis = $(this).find('y-axis').text();

                    var oNewImg = document.createElement('img');
                    oNewImg.id = idText;
                    oNewImg.src = imgSrc;                                                         

                    document.body.appendChild(oNewImg);

                    var originalLeft = parseInt($('#'+oNewImg.id).position().left);

                    $('#'+oNewImg.id).css('left', (xAxis) + 'px');
                    $('#'+oNewImg.id).css('top', (yAxis) + 'px');});

Answer 1

This might sound funny, but why don't you do it? Query the database and for each image output:

<div class="container">
    <?php
      // SQL query
      $buffer = mysql_query($q);
      while($v = mysql_fetch_assoc($buffer)) {
         echo '<img src="'.$v['url'].'" style="top: '.$v['top'].'px; left: '.$v['left'].'px" />'; 
       }
    ?>
</div>
        <style>
            .container {
               width: 100%;
               height: 100%;
               position: relative;
            }
            .container img {
               position: relative;
            }
        </style>

If you got the jQuery part, and storing the images locations in the db, I don't see how you could have problems displaying them...