Question

在我的页面上，我使用Jquery UI extension对div进行排序。 div分为2列。我创建了JS Bin，请看一下。

当您将所有3个div拖到左侧时，您无法再将它们放在右侧。哪里出错了？

＆＃13;

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

＆＃13;

* {
  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%;
  }
}

＆＃13;

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

＆＃13;

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以下内容：

如果未设置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); });，因此该元素的宽度为列的宽度。

＆＃13;

* {
  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%;
  }
}

＆＃13;

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

＆＃13;

print ("rob" ,"mark" , "hanna" , separator:"$") // prints rob$mark$hanna

＆＃13;

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

2 个答案: