Jquery 可排序，上边，边上或下边答案

【问题标题】：Jquery sortable, over, on side or underJquery 可排序，上边，边上或下边
【发布时间】：2015-06-10 10:01:09
【问题描述】：

我使用 sortable 对 div 进行排序。
是否可以对 div 进行左或右排序，而不仅仅是向上或向下排序？
我用盒子创造了一个小提琴。我可以将它们安排在彼此之上和之下，但不能在 echother 一侧。这可能吗？

更新我还想为每个盒子选择，如果块是留在侧面或下方/上方！

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;
}

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

【问题讨论】：

在你的小提琴中，可排序的<br>s 正在搞乱布局。至于沿任一轴拖动项目，并基于现有答案下的 cmets，您可以使用 grid 选项，但使用单独的 draggable/droppable 小部件而不是 @987654329 可能更容易实现@。注意：jqueryui 的grids 不太喜欢引导样式
@blgt 谢谢！我想我必须重新考虑一下。可能 jquery 插件“gridster”更适合我！

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

【解决方案1】：

浮动左侧可排序 div 可能会起作用，因此请添加 CSS #blocks>div { float: left; }

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

【讨论】：

向左浮动，会导致总是把盒子放在一边！？我不想要那个。只是有时..？
您可以在需要时有条件地应用 css。

【解决方案2】：

类似于 this

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

#dropzone
{
    display:flex;
}

【讨论】：

好吧，我不喜欢所有的盒子都放在一边。只是我选择的那个。所以有些盒子会留在下面/上面，有些在旁边！？

【解决方案3】：

从你的标记中删除br标签和float: left这个类.block {} Demo

【讨论】：

好吧，我不喜欢所有的盒子都放在一边。只是我选择的那个。所以有些盒子会留在下面/上面，有些在旁边！？

【解决方案4】：

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

【讨论】：