Question

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

$( ".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>

Answer 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基本上只交换位置，它不能让块停留在您想要的任何位置。

因此，您想将这些块拖到各处并同时碰撞，这个lib gridstack.js可以帮助您实现这一目标。

选中此demo

多个可拖动范围不重叠

1 个答案: