Перетащите div

Question

$('.component-container').sortable({
  cursor: 'move',
  items: ".component-section",
  placeholder: 'ui-state-highlight',
  start: function(e, ui) {
    ui.placeholder.width(ui.item.find('.component-section').width());
    ui.placeholder.height(ui.item.find('.component-section').height());
    ui.placeholder.addClass(ui.item.attr("class"));
  }
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fila" class="row center expandir component-container" style="text-align: center;">
  <div class="col-md-6 col-xs-12" id="firstCol">
    <div class="col-md-12 col-sm-12 component-section" id="panel1">
    </div>
    <div class="col-md-12 col-sm-12 component-section" id="panel3">
    </div>
  </div>
  <div class="col-md-6 col-xs-12" id="secondCol">
    <div class="col-md-12 col-sm-12 component-section" id="panel2">
    </div>
  </div>
</div>

Я сделал это можно перетаскивать.Но у него есть ошибка, он позволяет мне сбросить три деления в одном столбце, но не позволяет поместить его обратно в пустой столбец. Знаете ли вы, как я могу сделать так, чтобы можно было поместить один из этих делителей впустые столбцы?

Спасибо

Answer 1

При перетаскивании раздела компонента вы можете проверить дочерние элементы firstCol и secondCol, используя dom. Если число равно 2 (в ваших условиях дано), отмените операцию удаления (может быть сделано с помощью сортируемого / перетаскиваемого плагина).

Редактировать 1: // С добавленным вами кодом плункера

$('.component-container').sortable({
      connectWith: '.component-container',  // Add this
      cursor: 'move',
      items: ".component-section",
      placeholder: 'ui-state-highlight',
      start: function(e, ui) {
        ui.placeholder.width(ui.item.find('.component-section').width());
        ui.placeholder.height(ui.item.find('.component-section').height());
        ui.placeholder.addClass(ui.item.attr("class"));
      }
    });
});

Из html удалите класс .component-container из текущей позиции и добавьте его к элементам firstCol и secondCol

<div id="fila" class="row center expandir " style="text-align: center;">  - removed component-container from here


<div class="col-md-6 col-xs-12 component-container" id="firstCol">  - added component-container here

<div class="col-md-6 col-xs-12 component-container" id="secondCol">  - added component-container here