使用jQuery重置圖像的位置並保存座標Draggable

Question

我使用jQuery-ui實現了可拖動的圖像可拖動並將座標保存到數據庫中。

現在我以xml格式獲取座標和圖像URL。

我想重置圖像位置。它被保存在哪裏。

=============這裏是源代碼：=============

$.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

這聽起來滑稽，但你爲什麼不你這樣做嗎？查詢數據庫，併爲每個圖像輸出：

<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> 

如果你有jQuery的一部分，並存儲在數據庫中圖像的位置，我不明白你怎麼可能有問題，顯示它們...