如何保存我的div在页面加载时的位置而不拖动div？

嗨，我使用如下方法目前保存在div如何保存我的div在页面加载时的位置而不拖动div？

的Javascript

$(document).ready(function(){ 


    $(".ex").draggable({containment:'parent',cursor:'pointer',opacity:0.6, 



    stop : function() { 
      var id = $(this).attr("id"); 
       var x = $(this).position().left; 
       var y = $(this).position().top; 

       $.ajax({ 
     url: "changeContact.php", /* You need to enter the URL of your server side script*/ 
     type: "POST", 
      /* add the other variables here or serialize the entire form. 
      Image data must be URI encoded */ 
     data:{ 
       cid:id, 
       x: x, 
       y: y 
       }, 
     success: function(msg) 
     { 

     } 

      }) 
      } 
}); 

});

PHP

$qry = "SELECT * from contact Where CustomerID='$pid'"; 
$result = mysql_query($qry); 

while ($row = mysql_fetch_array($result)) 
{ 
echo '<div class="ex" id="'.$row["ContactID"].'">'; 
echo '</div>'; 

}

如何保存时单独页面为onload每个数据的位置？有什么它会自己调用Ajax方法而不拖动？

来源

2013-06-27 Ryan

我建议将执行AJAX调用的代码放入其自己的函数中。这样，您可以在页面加载时以及从可拖动代码中调用一次。

$(function ($) { // $(function() ... is the same as $(document).ready(function() ... - just quicker 

    function doAjax (data) { 
     $.ajax({ 
      url: 'changeContact.php', 
      type: 'POST', 
      data: data, 
      success: function() { 
       // ... 
      } 
     }); 
    } 

    function onDraggableStop (event, ui) { 
     doAjax({ 
      cid: this.id, 
      x: ui.offset.left, 
      y: ui.offset.top 
     }); 
    } 

    function onPageLoad() { 
     var position = $(this).position(); 

     doAjax({ 
      cid: this.id, 
      x: position.left, 
      y: position.top 
     }); 
    } 

    $(".ex") 
     .each(onPageLoad) // for all found elements: fire the ajax call immediately 

     // set up dragging support 
     .draggable({ 
      containment: 'parent', 
      cursor: 'pointer', 
      opacity: 0.6, 
      stop : onDraggableStop // fire the ajax call for the element that just stopped dragging 
     } 
    ); 

});

来源

2013-06-27 09:23:12 defaude

哦，并且缺少ID的问题......我猜这些元素的HTML是在服务器上动态生成的？只需在其中设置适当的ID即可 - 无需在客户端上花费太多时间。如果这些条目来自数据库，请使用它们的唯一标识（可能带有前缀）作为html节点标识。 – defaude

我设法获取数据的所有位置是-5 – Ryan

对不起，但没有看到实际的HTML，我只能在这里进行粗略的猜测;）jQuery UI的“可拖动”通过简单地放置'position：absolute;并根据需要更改“顶部”和“左侧”。虽然你得到了-5，但是... 它可能是一个祖先元素被定位为'relative'，因此作为抵消父母。但正如我所说 - 这只是猜测和猜测在这里;） – defaude

[增订] $(document).ready(function() {之后将附加$.ajax()请求：

$(document).ready(function(){ 

    // additional ajaxrequest after pageload: 

var obj = {windows:{}}; 

$(".ex").each(function() { 

    obj.windows[$(this).attr('id') + 'posLeft'] = $(this).position().left; 
    obj.windows[$(this).attr('id') + 'posTop'] = $(this).position().top; 

}) 

$.ajax({ 
     url : 'server.php', 
     type : 'post', 
     data : obj, 
     dataType : 'json', 
     success : function(data) 
     { 

     }, 
     error : function() 
     { 

     } 
    }); 

    $(".ex").draggable({ 
    //[...]

附加$就（）将被页面加载后执行。

例如，您的php脚本可以通过$_POST['windows']获取数据。你可以使用一个foreach循环。

这里是小提琴：http://jsfiddle.net/VQa3S/

下面是数据，在我的小提琴将被发送到服务器：

posted data

此外，小心你的SQL查询的。它可能容易被sql注入。使用PDO并绑定参数。

来源

2013-06-27 08:37:55 Simon

这不是工作当前我的JavaScript是var id = $（this）.attr（“id”）; var x = $（this）.position（）。left; \t \t \t var y = $（this）.position（）。top; – Ryan

我不会知道我的DIV ID，我只有它的课程ID – Ryan

谢谢您的评论。我已通过示例更新了我的代码。 – Simon

如何保存我的div在页面加载时的位置而不拖动div？

回答

相关问题