如何保存我的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？

回答

相關問題