在数据库中保存 jquery ui 位置并显示它

Question

我有这个 jquery ui 使用调整大小和拖放我将如何将其保存在数据库中 这就是我到目前为止所拥有的 http://plnkr.co/edit/rAwEs6eUS2JPmFMxqQSV?p=preview

我如何将我所有的位置和大小保存到数据库然后重新显示它，我不知道从哪里开始我知道我需要创建一个这样的 ajax

    $.ajax({
    url:  'url',
       data:{

    },
    success: function(data){

    }
    });

问题是我应该在 ajaxs 的data 区域放什么 当点击保存按钮时

所以基本上我想将所有 div 保存在 div#board

Answer 1

如果您打算捕获板的内容，您可能需要捕获以下内容：

{
  top,
  left,
  width,
  height,
  content
}

如果需要，您可以为元素分配 ID 或其他特定属性。

考虑以下代码：

$(function() {
  function getComponents(b) {
    var items = [];
    $(".new_item", b).each(function(i, el) {
      var dObj = $(el).position();
      dObj.width = $(el).width();
      dObj.height = $(el).height();
      dObj.content = $(el).text().trim();
      items.push(dObj);
    });
    return items;
  }

  $(".component_item").draggable({
    helper: 'clone',
    cursor: "move"
  });

  $("#board").droppable({
    accept: ".component_item",
    drop: function(event, ui) {
      $(this).append($(ui.draggable).clone());
      $("#board .component_item").addClass("new_item");
      $(".new_item").removeClass("ui-draggable component_item");
      $(".new_item").resizable({
        handles: "all",
        autoHide: true
      });
      $(".new_item").draggable();
    }
  });
  
  $(".btn[type='submit']").click(function() {
    var btn = $(this);
    btn.html("Saving...");
    var items = getComponents($("#board"));
    console.log(items);
    $.post("https://www.example.com/update-board.php", {
      items: items
    }, function(r, s, x) {
      if (x.status == 200) {
        btn.html("Saved");
      } else {
        console.log(s, x);
        btn.html("Failed");
      }
      setTimeout(function() {
        btn.html("Save");
      }, 3000);
    });
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
  <div class="row">
    <div class="col-10 border border-info rounded board" id="board">
      Board
    </div>
    <div class="col-2 border border-warning rounded components" id="Allcomponents">
      <div class="card text-right">
        <div class="card-body border border-dark component_1 component_item" id="component_1">
          <h5 class="card-title">C 1</h5>
          <p class="card-text"></p>
        </div>
      </div>
      <div style="width:500px;" class="card text-right">
        <div class="card-body border border-dark component_2 component_item" id="component_2">
          <h5 class="card-title">C 2</h5>
          <p class="card-text"></p>
        </div>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-info" type="submit">Save</button>

让用户知道点击按钮时发生了什么是一种很好的做法。因此，如果您必须向服务器发送数据，则可能需要一些时间，也可能会失败。因此，请考虑如何提醒用户注意这一点。

希望这会有所帮助。