Question

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

我如何将所有位置和大小保存到db，然后重新显示它，我不知道从哪里开始，我确实知道我需要创建这样的ajaxs

    $.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>

优良作法是让用户知道单击按钮时发生了什么。因此，如果您必须将数据发送到服务器，则可能要花费一些时间，也可能会失败。因此，请考虑如何提醒用户这一点。

希望这会有所帮助。

在数据库中保存jQuery UI位置并显示它

1 个答案: