拖放div

Question

＆＃13;

＆＃13;

$('.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"));
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我已经让它可以拖放了。但它有一个错误，它允许我在同一列中删除三个div，但它不允许我把它放回空列。你知道我怎么能做到能够把这个div中的一个放入空栏？

由于

Answer 1

在拖放组件部分时，您可以使用dom检查firstCol和secondCol子项。如果数字是2（在您给出的条件下），取消放置操作（可以使用可排序/可拖动插件完成）。

编辑1：//使用您添加的plunker代码

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

<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