Question

我使用jQuery-ui Draggable实现了可拖动图像，并将坐标保存到数据库中。

现在我以xml格式获取坐标和图像网址。

我想重置图像位置。它被保存的地方。

=============这是源代码：=============

$.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部分，并将图像位置存储在数据库中，我看不出如何在显示它们时遇到问题......

Answer 2

这可能会帮助正在寻找可拖动的JqueryUI（将其重置为按钮上的原始位置）的所有用户单击垂直对齐或水平对齐。 arr https://jsfiddle.net/JunaidAli/wp1n796q/321

使用jQuery Draggable重置已保存坐标的图像位置

2 个答案: