Question

我试图使用jQuery sortable创建一个可排序的网格。这是我的HTML：

<div id ="container">
<div class="row">
  <div class="column">
    <div class="inner"> 1 </div>
  </div>
  <div class="column">
    <div class="inner">2</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="inner">3</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="inner">4</div>
  </div>
  <div class="column">
    <div class="inner">5</div>
  </div>
</div>
</div>

这里是javascript：

$("#container").sortable();
$("#container .inner").sortable({connectWith: ".column"});

我希望能够对行和单个列进行排序。排序行工作正常，但由于某种原因，列没有任何反应。这个想法是移动＆＃34;内部＆＃34;任何栏目都可以自由地使用。

Answer 1

我想你可能会假设Sortable为你制作了一个网格。它不是。此外，如果您查看示例，您将看到每列的两个不同的容器。我从divs做了一个非常简单的，并使用css使它看起来像两列。我认为你将有必要包括在内。

如果我保存正确，你应该能够看到它正常工作https://jsfiddle.net/bindrid/f2pcc9wL/

<style>
    .container{ width:60px}
    .col1{ width:20px; 
         float:left;  }
    .col2{ width:20px; float:right}
    .cell{width:15px; border: thin solid black}
</style>
<script>
    $( function() {
    $( "#box1, #box2"  ).sortable({connectWith: '.both'})} );
</script>
<div class='container'>
    <div id='box1' class='col1 both'>
        <div class='cell'>1</div>
        <div class='cell'>2</div>
        <div class='cell'>3</div>
    </div>

    <div id='box2' class='col2 both'>
        <div class='cell'>4</div>
        <div class='cell'>5</div>
        <div class='cell'>6</div>
    </div>
</div>

jQuery可排序的行和列网格

1 个答案: