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

Posted 2023-05-08

【中文标题】在数据库中保存 jquery ui 位置并显示它

【英文标题】：saving jquery ui position in db and displaying it

【发布时间】：2019-10-31 13:48:39

【问题描述】：

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

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

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

    ,
    success: function(data)

    
    );

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

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

【问题讨论】：

欢迎来到 Stack Overflow。通常您要捕获位置框数据，top、left、width 和 height。取决于你需要什么。此外，如果您将其发送到 php 或 .NET，您可以将其全部作为对象或字符串发送。请说明你想做什么。

【参考方案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>

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

希望这会有所帮助。

【讨论】：

@6563cc10d2 如果您觉得它有帮助，您可以为答案投票。如果您觉得它回答了您的问题，您可以点击复选标记。