时间戳

首页 > 解决方案 > 在数据库中保存 jquery ui 位置并显示它

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

问题描述

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

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

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

    },
    success: function(data){

    }
    });

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

所以基本上我想保存所有的divdiv#board

标签： jqueryajaxdatabasejquery-ui

解决方案

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

{
  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>

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

希望这可以帮助。

推荐阅读