Jquery 可排序、高于、位于侧面或低于

Question

我使用 sortable 对 div 进行排序。
是否可以将 div 向左或向右排序，而不仅仅是向上或向下排序？
我用盒子创建了一个 fiddle。我可以将它们上下排列，但不能放在 echother 的一侧。这可能吗？

更新 我也想选择，如果方块留在侧面或 under/over，对于每个盒子！

Fiddle: http://jsfiddle.net/3qr8z83v/

HTML

<div class="col-lg-2 well" id="blocks">
  <div class="block" id="block1">1</div>
  <br>
  <div class="block" id="block2">2</div>
  <br>
  <div class="block" id="block3">3</div>
  <br>
  <div class="block" id="block4">4</div>
  <br>
</div>
<div class="col-lg-2 well" id="dropzone"></div>

CSS

.block {
  width: 30px;
  height: 30px;
  background-color: blue;
  color: white;
  text-align: center;
}

JS

$('#blocks').sortable({
  connectWith: '#dropzone',
});
$('#dropzone').sortable({
  connectWith: '#blocks',
});

Answer 1

向左浮动可排序 div 可能有效，因此添加 CSS #blocks>div { float: left; }

虽然您可能需要调整您的拖放区。

Answer 2

类似于this

#dropzone .block
{
    float:left !important;
}

#dropzone
{
    display:flex;
}

Answer 3

从您的标记中删除 br 标记，并 float: left 添加到此 class .block {} Demo

Answer 4

Jquery sortable 不能用作网格。为此，我将不得不使用 droppable。