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

我应该如何生成多个发布/获取请求（移动后）以在我的数据库中存储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/

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

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

1 个答案: