Jquery可以在一边或另一边进行排序

时间:2015-06-10 10:01:09

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

我使用sortable来排序div 是否可以向左或向右排序div,而不仅仅是向上或向下排序? 我用盒子创造了一个小提琴。我可以在彼此之上和之下安排它们,但不能放在另一侧。这可能吗?

更新 此外,我还想选择,如果每个方块都在侧面或下方/下方停留!

小提琴: 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',
});

4 个答案:

答案 0 :(得分:1)

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

虽然您可能需要调整掉区。

答案 1 :(得分:0)

this

之类的东西
#dropzone .block
{
    float:left !important;
}

#dropzone
{
    display:flex;
}

答案 2 :(得分:0)

从您的标记中删除br标记,并float: left删除此类.block {} Demo

答案 3 :(得分:0)

Jquery sortable无法作为网格工作。我将不得不使用droppable。