jquery用户界面无法从左侧拖动到右侧

在我的页面上，我正在使用Jquery UI extension对div进行排序。该div分为2列。我创建了一个JS Bin，请看看它。jquery用户界面无法从左侧拖动到右侧

当您将所有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/[email protected]/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>

来源

2016-09-06 MyNewName

你将永远不会快乐与jQuery UI :( –

@DanielKobe我应该用'Draggabilly'（http://draggabilly.desandro.com）？我尝试了第一，但有同样的问题 – MyNewName

从来没有使用过，但实际上你可以很容易地实现基本的拖拽功能，它是一个有趣的项目imo。但是我对jquery拖拽东西的鄙视非常糟糕，你只能尝试搞乱每一个选项和可能的方式做事情，但是如果你的项目变得更复杂，你会遇到更多的问题，我不喜欢包装工具，为什么不尝试模仿文档中的例子？ https://jqueryui.com/draggable/#sortable –

的Packery documentation says如下：

没有columnWidth中集，所拖动的项目只能用来代替其他物品被丢弃。

您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/[email protected]/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>

来源

2016-09-06 06:37:32 Sevanteri

谢谢！没有看到这个，对不起。 – MyNewName

如果添加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移动到左边时，它将它看作只有一列。

希望这会有所帮助。

来源

2016-09-06 06:34:22 Tankegang

谢谢，我没有看到它！ – MyNewName

jquery用户界面无法从左侧拖动到右侧

回答

相关问题