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用戶界面無法從左側拖動到右側

回答

相關問題