Jquery UI 无法从左侧拖动到右侧

Question

在我的页面上，我使用Jquery UI extension来排序div。div按2列排列。我创建了一个JS Bin，请看看它。

当你把所有3个div拖到左边时，你不能再把它们拖到右边。错在哪里?

$(document).ready(function() {
  var $grid = $('.grid').packery({
    itemSelector: '.gridItem',
    gutter: '.gridGutter',
    percentPosition: true
  });
  var $items = $grid.find('.gridItem').draggable();
  $grid.packery('bindUIDraggableEvents', $items);
});

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Francois One', sans-serif;
  font-size: 16px;
  text-decoration: none;
}
.grid {
  width: 1000px;
  background-color: aqua;
}
.gridItem {
  width: 49%;
  background-color: coral;
}
.gridGutter {
  width: 2%;
}
@media screen and (max-width: 1000px) {
  .grid {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/packery@2.1.1/dist/packery.pkgd.min.js"></script>
<div class="grid">
  <div class="gridGutter"></div>
  <div class="gridItem">div 1</div>
  <div class="gridItem">div 2</div>
  <div class="gridItem">div 3</div>
</div>

Answer 1

Packery文档说:

如果未设置columnWidth，则拖动的项只能放置在其他项的位置。

您可以为columnWidth设置一个选择器，以便它将该元素的宽度作为列的宽度。

$(document).ready(function() {
  var $grid = $('.grid').packery({
    itemSelector: '.gridItem',
    gutter: '.gridGutter',
    percentPosition: true,
    columnWidth: '.gridSizer'
  });
  var $items = $grid.find('.gridItem').draggable();
  $grid.packery('bindUIDraggableEvents', $items);
});

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Francois One', sans-serif;
  font-size: 16px;
  text-decoration: none;
}
.grid {
  width: 1000px;
  background-color: aqua;
}
.gridSizer,
.gridItem {
  width: 49%;
}
.gridItem {
  background-color: coral;
}
.gridGutter {
  width: 2%;
}
@media screen and (max-width: 1000px) {
  .grid {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/packery@2.1.1/dist/packery.pkgd.min.js"></script>
<div class="grid">
  <div class="gridSizer"></div>
  <div class="gridGutter"></div>
  <div class="gridItem">div 1</div>
  <div class="gridItem">div 2</div>
  <div class="gridItem">div 3</div>
</div>

Answer 2

如果添加如下所示的columnWidth: 390，它应该可以工作。

        $(document).ready(function(){
          var $grid = $('.grid').packery({
            itemSelector: '.gridItem',
            gutter: '.gridGutter',
            columnWidth: 390,
            percentPosition: true
          });
          var $items = $grid.find('.gridItem').draggable();
          $grid.packery( 'bindUIDraggableEvents', $items );
        });

我怀疑当你把所有的div移到左边时，它会认为它只有一列。