Jquery 可排序,在上面,在旁边或下面

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

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

更新 我还想为每个盒子选择方 block 是在侧面还是下方/上方!

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',
});

最佳答案

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

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

关于Jquery 可排序,在上面,在旁边或下面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30753126/

相关文章:

javascript - 基于日期字段的同位素过滤

html - 不使用 DIV 居中 IMG 标签?

jQuery 通过变量中的两个类之一按类名获取元素

html - 1 个 div 旁边的 2 个堆叠 div

javascript - 动画不透明度进出滚动

javascript - 如何从 IJavaScriptExecutor 获取返回值

jquery - 如何避免 jQuery UI Draggable 也触发点击事件

asp.net - 将 float 的 Div/图像转换为单个图像

javascript - 使所有div.obstacles具有相同的功能

javascript - 获取 HTML 区域 map 并转换为 d