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

Posted 2023-05-08

【中文标题】可在多个容器/网格之间拖动的元素

【英文标题】：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

【问题讨论】：

我对此非常迷茫。

【参考方案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>