在数据库中存储多个可拖动项目的位置

Question

我的html中有一些可拖动的元素

<div class="box-body">
<div id="1" class="draggable ui-widget-content ui-draggable ui-draggable-handle" style="top:200px; left:80px;">
<div id="2" class="draggable ui-widget-content ui-draggable ui-draggable-handle" style="top:200px; left:100px;">
<div id="3" class="draggable ui-widget-content ui-draggable ui-draggable-handle" style="top:200px; left:120px;">
</div>

和我的脚本：

$( ".draggable" ).draggable({ containment: ".box-body", scroll: true }); 
$( document ).ready(function() {
    $('.box-body').slimscroll({
        alwaysVisible : true,
        axis: 'both',
        height: '500px',
        width: '100%',
        railVisible: true,
      });        
});

我应该如何生成多个 post/get 请求(在移动之后(以在我的数据库中存储div 位置？ 像这样的事情：

http://myURL/racks/id=divID&top=topValue&left=leftValue

我发现了一些像这样的代码：http://jsfiddle.net/CAEV5/9/但是我应该批量更新数据库中的所有div位置！！

Answer 1

从你的小提琴中，我会建议这样的事情：

$(function() {
  function recordPos(el, pos) {
    var id = el.data("need");
    $.ajax({
      type: "POST",
      url: "your_php_script.php",
      data: {
        x: pos.left,
        y: pos.top,
        need_id: id
      },
      success: function(msg) {
        console.log("Data saved for ", el[0], pos);
      }
    });
  }
  $("#set div").draggable({
    stack: "#set div",
    stop: function(event, ui) {
      //Do the ajax call to the server
      recordPos($(this), ui.offset);
    }
  }).each(function() {
    recordPos($(this), $(this).offset());
  });
});

http://jsfiddle.net/Twisty/CAEV5/320/

创建一个函数允许我们多次重复相同的过程。当一个项目停止时，以及初始化时的每个项目，我们调用它。SSo 如果用户不移动任何项目，而只移动 1，则您知道页面加载时所有项目的位置。