сохранение позиции jquery ui в БД и ее отображение

Question

У меня есть этот JQuery UI используя изменение размера и перетаскивание, как бы сохранить его в БД это то, что я имею до сих пор http://plnkr.co/edit/rAwEs6eUS2JPmFMxqQSV?p=preview

как мне сохранить все свои позиции и размеры в БД, а затем снова отобразить их, я не знаю, с чего начать, я знаю, что мне нужно создать ajaxs, как этот

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

    },
    success: function(data){

    }
    });

проблема в том, что я должен поместить в область data ajaxs при нажатии кнопки сохранения

так что в основном я хочу сохранить все div в div#board

Answer 1

Если вы планируете захватить содержимое доски, вы можете захватить следующее:

{
  top,
  left,
  width,
  height,
  content
}

Если хотите, вы можете присвоить элементам идентификатор или другой определенный атрибут.

Рассмотрим следующий код:

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

Хорошей практикой является информирование пользователя о том, что происходит, когда он нажимает кнопку. Поэтому, если вам необходимо отправить данные на сервер, это может занять некоторое время или также может привести к сбою. Так что подумайте, как предупредить пользователя об этом.

Надеюсь, это поможет.