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

发布于 2024-09-27 05:04:20 字数 1171 浏览 2 评论 0原文

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

现在我得到 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');});

原文

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');});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诗酒趁年少 2024-10-04 05:04:20

这可能听起来很有趣，但你为什么不这样做呢？查询数据库并获取每个图像输出：

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

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

回复收藏 0 原文