时间戳

首页 > 解决方案 > 拖放 div

jquery - 拖放 div

问题描述

$('.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 放入空列？

谢谢

标签： jquerycssdrag-and-dropbootstrap-4

解决方案

在拖放组件部分时，您可以使用 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

推荐阅读