jquery - 拖放 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>

我已经让它可以拖放了。但它有一个错误，它允许我在同一列中放置三个 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