當瀏覽器滾動時，使用錯誤的起始位置可拖拽jQuery UI元素？

我一直在使用jQuery 1.4.2和jQuery UI 1.8.5來創建可恢復到原始位置的可拖動元素。雖然有一個問題;當你滾動瀏覽器窗口時，開始位置將被更改爲從更高的位置開始。它看起來像一個絕對的位置，但已滾動的金額沒有考慮到，但我不能確定。我已經完成了我在FireFox中的所有開發和測試。當瀏覽器滾動時，使用錯誤的起始位置可拖拽jQuery UI元素？

這裏是我記錄了這個短片.. http://www.youtube.com/watch?v=KPW4ljpjuF8

JavaScript的初始化代碼看起來是這樣的..

$('.frameworkNavigationItem').draggable({ 
     appendTo : 'body', 
     revert : 'invalid', 
     containment : 'body', 
     zIndex : 999 
    });

的元素之一的HTML看起來像這樣..

<div class="frameworkNavigationItem frameworkNavigationItemColor"> 
    <div class="frameworkNavigationItemName">Home</div> 
    <div class="frameworkNavigationItemDisplay"> 
     <input type="checkbox" checked="true" name="2_1"> 
     <input type="checkbox" checked="true" name="2_2"> 
     <input type="checkbox" checked="true" name="2_4"> 
    </div> 
    <div class="frameworkNavigationItemController"> 
     <input type="text" maxlength="255" value="mainNews" name="2_co"> 
    </div> 
    <div class="frameworkNavigationItemChild"> 
     <select name="2_ch"> 
      <option value="0">-</option> 
     </select> 
    </div> 
    <div style="clear: both;"></div>   
</div>

這是CSS的一起去吧。

.frameworkNavigationItem 
    { 
     background-color   : #CACACA; 
     height      : 20px; 
     line-height     : 20px; 
     margin      : 2px 0; 
     vertical-align    : middle; 
    } 

     .frameworkNavigationItem:hover 
     { 
      background-color   : #BABABA; 
     } 

      .frameworkNavigationItem:hover input, .frameworkNavigationItem:hover select 
      { 
       background-color   : #BABABA; 
      } 

     .frameworkNavigationItem input, .frameworkNavigationItem select 
     { 
      background-color   : #CACACA; 
      border      : 0; 
      font-size     : 10px; 
     } 

     .frameworkNavigationItemColor 
     { 
      background-color   : #DADADA; 
     } 

      .frameworkNavigationItemColor input, .frameworkNavigationItemColor select 
      { 
       background-color   : #DADADA; 
      } 

     .frameworkNavigationItemName 
     { 
      float      : left; 
      height      : 15px; 
      padding-left    : 5px; 
     } 

     .frameworkNavigationItemDisplay 
     { 
      float      : right; 
      text-align     : right; 
      width      : 48px; 
     } 

     .frameworkNavigationItemController 
     { 
      float      : right; 
      width      : 160px; 
     } 

      .frameworkNavigationItemController input 
      { 
       width     : 150px; 
      } 

     .frameworkNavigationItemChild 
     { 
      float      : right; 
      width      : 160px; 
     } 

      .frameworkNavigationItemChild select 
      { 
       width     : 150px; 
      }

請幫我一把！我不知道爲什麼會發生這種情況。

來源

2010-10-14 Roel van Uden