多个可拖动跨度不重叠

【问题标题】：multiple draggable spans don't overlap多个可拖动跨度不重叠
【发布时间】：2018-07-21 10:15:56
【问题描述】：

我正在尝试使多个跨度可拖动，但唯一的问题是它们相互重叠。但我想让它们相互碰撞而不是重叠。

$( ".selector" ).draggable({
  cursor: "crosshair",
  containment: "#insideme"
});

#insideme {
      width: 300px;
      height: 200px;
      border: 1px dotted red;
}
.selector {
      background: lime;
      width: 40px;
      height: 40px;
      border: 1px solid drakgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="insideme">
<div class="selector">Drag me</div>
<div class="selector">Drag me</div>
<div class="selector">Drag me</div>
<div class="selector">Drag me</div>
<div class="selector">Drag me</div>
</div>

【问题讨论】：

标签： javascript html jquery-ui draggable collision

【解决方案1】：

尝试使用sortable就可以了

$( "#insideme" ).sortable({
  cursor: "crosshair",
  containment: "#insideme"
});

#insideme {
      width: 300px;
      height: 200px;
      border: 1px dotted red;
}
.selector {
      background: lime;
      width: 40px;
      height: 40px;
      border: 1px solid drakgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="insideme">
<div class="selector">Drag me</div>
<div class="selector">Drag me</div>
<div class="selector">Drag me</div>
<div class="selector">Drag me</div>
<div class="selector">Drag me</div>
</div>

sortable 基本上只是交换他们的位置，它不能让块留在你想要的任何地方。

所以你想把这些块拖到任何地方并同时相互碰撞，这个库gridstack.js 可以帮助您实现这一目标。

检查这个demo

【讨论】：