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

如果您如下所示添加 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 向左移动时，它只会将其视为一列。

希望对您有所帮助。

Answer 2

Packery documentation says以下：

Without columnWidth set, dragged items can only be dropped in place of other items.

你 can set a selector 为 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>

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

Jquery UI can't drag from left to right side

html

javascript

css

jquery

packery