JQuery UI не может перетащить слева направо

Question

На моей странице я использую Jquery UI extension сортировать дивы. Дивы расположены в 2 столбца. Я создал JS Bin, пожалуйста, посмотрите на это.

Когда вы перетаскиваете все 3 деления на левую сторону, вы не можете снова получить их на правой стороне. Где ошибка?

$(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 влево, он видит только один столбец.

Надеюсь это поможет.