Jquery UI can't drag from left to right side

Question

On my page I'm using the Jquery UI extension to sort divs. The divs are arranged in 2 columns. I created a JS Bin, please take a look on it.

When you drag all 3 divs to the left side, you can't get them on the right side again. Where is the mistake?

$(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>

@DanielKobe should I use `Draggabilly`(http://draggabilly.desandro.com)? I tried it first, but had the same issue. — MyNewName, Sep 06 '16 at 06:20
Never used that before, but you can actually implement basic dragging functionality pretty easily, its a fun project imo. But my expereince with the jquery drag stuff was pretty crappy, you just gotta try messing with every option and possible way to do things but your gonna run into more issues if your porject gets more complicated. I dono what packery does? Why not try mimicking the examples from the docs? https://jqueryui.com/draggable/#sortable — Daniel Kobe, Sep 06 '16 at 06:33
@DanielKobe `Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts.`. My first thought was to do the dragging functionality by myself. I will do it definitely, but not in this project. Anyways, thanks for the comment! :) — MyNewName, Sep 06 '16 at 06:51

score 1 · Answer 1 · answered Sep 06 '16 at 06:34

If you add a columnWidth: 390 as show below it should work.

        $(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 );
        });

I suspect that when you move all div to the left it sees it as only one column.

Hope this helps.

score 1 · Accepted Answer · answered Sep 06 '16 at 06:37

The Packery documentation says the following:

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

You can set a selector for the columnWidth so it takes that element's width as the column's width.

$(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>

Thanks for that! Didn't saw this, sorry. – MyNewName Sep 06 '16 at 06:43 — MyNewName, Sep 06 '16 at 06:43

Jquery UI can't drag from left to right side

2 Answers2