可在多个容器/网格之间拖动的元素答案

【问题标题】：Elements draggable amongst multiple containers/grid可在多个容器/网格之间拖动的元素
【发布时间】：2020-06-29 01:50:30
【问题描述】：

我希望能够在多个网格之间拖动/排序元素。很像下面的 sn-p/image。

但是，问题是，当我将元素拖动到网格之外时，它会意外地开始跳跃/隐藏并表现得混乱。有没有更好的方法（也可以是一些插件），可以帮助我实现这种行为？

非常感谢。

$( document ).ready(function() {
$(".sortable-grid").sortable({
    revert: true
});

$(".sortable-element").draggable({
    connectToSortable: ".sortable-grid",
    revert: "invalid"
});
});

.sortable-grid {
  padding: 15px;
  border: 1px dashed;
}

.sortable-element {
  background-color: #DDD;
  margin-bottom: 5px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="sortable-grid">
  <div class="sortable-element">Some content</div>
  <div class="sortable-element">Some content</div>
  <div class="sortable-element">Some content</div>
  <div class="row">
    <div class="col-md-4">
      <div class="sortable-grid">
          <div class="sortable-element">Some content</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sortable-grid">
            <div class="sortable-element">Some content</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sortable-grid">
          <div class="sortable-element">Some content</div>
      </div>
    </div>
  </div>
 
</div>

enter image description here

【问题讨论】：

我对此非常迷茫。

标签： javascript jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

不清楚为什么需要 Draggable。由于所有项目都在Sortable下，因此它们已经可以拖动了。

例子：

$(function() {
  $(".sortable-grid").sortable({
    revert: true
  });
});

.sortable-grid {
  padding: 15px;
  border: 1px dashed;
}

.sortable-element {
  background-color: #DDD;
  margin-bottom: 5px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="sortable-grid">
  <div class="sortable-element">Some content</div>
  <div class="sortable-element">Some content</div>
  <div class="sortable-element">Some content</div>
  <div class="row">
    <div class="col-md-4">
      <div class="sortable-grid">
        <div class="sortable-element">Some content</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sortable-grid">
        <div class="sortable-element">Some content</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sortable-grid">
        <div class="sortable-element">Some content</div>
      </div>
    </div>
  </div>

</div>

【讨论】：