Как сохранить позицию моего div, когда страница загружается без перетаскивания div?

Question

Привет я в настоящее время сохранение 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 без перетаскивания?

Answer 1

Я рекомендую поместить код, который выполняет вызов 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 
     } 
    ); 

}); 

Answer 2

[ОБНОВЛЕНО] Поместите дополнительный $.ajax() запрос после $(document).ready(function() {:

$(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({ 
    //[...] 

Дополнительный $ .ajax() будет выполняться после того, как PageLoad.

Ваш php-скрипт может получить данные, например, $_POST['windows']. Вы можете использовать foreach-loop.

Вот скрипка: http://jsfiddle.net/VQa3S/

Вот данные, будет отправлен на сервер в моей скрипке:

Кроме того, будьте осторожны вашим SQL-запрос. Он может быть уязвим при использовании sql-инъекций. Используйте параметры PDO и привязки.