jQuery-UI的Sortable函數不必要地移動div

我一直在使用jquery-ui的可排序演示一段時間。jQuery-UI的Sortable函數不必要地移動div

在仔細觀察之後，我發現它輕微地推動了div。

嘗試移動中心一個向左，然後就可以看到是正確的輕推約2個像素到左邊。

我想知道爲什麼。這一直搞亂了我的其餘功能。

PS：如果jsbin犯規顯示代碼，那就是：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>jQuery UI Sortable - Portlets</title> 
    <link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery-ui-1.8.2.custom.css" /> 
    <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="lib/jquery-ui-1.8.2.custom.min.js"></script> 
    <style type="text/css"> 
    .container { width: 788px; height: 405px; } 
    .column { width: 78px; height:405px; display:table-cell; vertical-align:bottom;} 
    .portlet { width: 78px; height: 10px; display: block; position:relative; } 
    </style> 
    <script type="text/javascript"> 
    $(function() { 

     $(".column").sortable({ 
      connectWith: '.column', 
      helper:'original' 
     }); 

     $(".portlet").addClass("ui-widget ui-widget-content ui-corner-all"); 

     $(".column").disableSelection(); 
    }); 
    </script> 
</head> 
<body> 

<div id="container" class="container"> 

    <div id="col-0" class="column"> 

     <div class="portlet" id="feeds"> 
      <div class="portlet-content"></div> 
     </div> 

     <div class="portlet" id="news"> 
      <div class="portlet-content"></div> 
     </div> 

    </div> 

    <div id="col-1" class="column"> 

     <div class="portlet" id="shopping"> 
      <div class="portlet-content"></div> 
     </div> 

    </div> 

    <div id="col-2" class="column"> 

     <div class="portlet" id="links"> 
      <div class="portlet-content"></div> 
     </div> 

     <div class="portlet" id="images"> 
      <div class="portlet-content"></div> 
     </div> 

    </div> 

</div> 
</body> 
</html>

來源

2010-09-27 Hrishikesh Choudhari

原因很簡單真的（雖然我不能肯定，如果這實際上是直到我看到你的CSS的原因）。

當您將ui-widget類添加到那些div時，您還將添加1px寬的邊框。邊框佔據了div另外兩邊的一個像素，它們的寬度爲78px，因此它們的實際寬度爲80px。

這與您爲列指定78px寬度的事實相結合意味着列的內容太窄，因此當最後一個元素被刪除時，列會從80px恢復爲78px。

我不得不修改您的jsbin demo以使用jQuery和jQuery UI，因此CSS與您所使用的CSS不一樣，因此我可能對此有錯。將列寬度更改爲80像素可以避免列轉移。

來源

2010-09-27 07:23:28

非常感謝您解釋ui-widget的工作原理。這似乎解決了我的演示代碼中的問題。有沒有一種方法可以查看您爲jsbin編寫的代碼？ – 2010-09-27 11:07:03

@Hrishikesh它就在那裏 - 答案中的鏈接，你可以按右上角出現的「編輯」按鈕 – 2010-09-27 11:23:43

真的非常感謝..我現在全部理解了.. – 2010-09-28 05:29:10

jQuery-UI的Sortable函數不必要地移動div

回答

相關問題