jQuery可拖動表格行在Chrome中調整表格大小

我使用jQuery製作了可拖動的表格行。它按照預期（主要）在Firefox和IE中運行。但是，在Chrome中，出於某種原因調整原始表的大小。jQuery可拖動表格行在Chrome中調整表格大小

<script type="text/javascript" src="js/jquery-1.7.1.min.js"> 
</script> 
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"> 
</script> 

<script> 
$(document).ready(function(){ 

    $(".drag").draggable({ 
     helper: function(event, ui){ 
      var ret = jQuery(this).clone(); 
      var width = jQuery(this)[0].offsetWidth; 
      var myHelper = []; 
      myHelper.push(
'<table style="width:' + width + 'px; background-color:green;">'); 
      myHelper.push(ret.html()); 
      myHelper.push('</table>'); 

      helper = myHelper.join(''); 
      return helper; 
     }, 
     axis: 'y', 
     revert: true, 
     start: function(event, ui){ 
      event.target.style.backgroundColor = 'blue'; 
     }, 
     stop: function(event, ui){ 
      event.target.style.backgroundColor = 'red'; 
     } 
    }); 
}); 

</script> 

<html> 

<table id="myTable" style="width:100%"> 
<tr class="drag"> 
<td> one </td> 
<td> one </td> 
<td> one </td> 
<td> one </td> 
<td> one </td> 
</tr> 

<tr class="drag"> 
<td> two </td> 
<td> two </td> 
<td> two </td> 
<td> two </td> 
<td> two </td> 
</tr> 

<tr class="drag"> 
<td> three </td> 
<td> three </td> 
<td> three </td> 
<td> three </td> 
<td> three </td> 
</tr> 

<tr class="drag"> 
<td> fourve </td> 
<td> fourve </td> 
<td> fourve </td> 
<td> fourve </td> 
<td> fourve </td> 
</tr> 

<tr class="drag"> 
<td> six </td> 
<td> six </td> 
<td> six </td> 
<td> six </td> 
<td> six </td> 
</tr> 
</table> 
</html>

我也根據以前的代碼做了this jsfiddle。在Chrome中，它調整了桌子的大小。但是，如果我去檢查桌子，只要我點擊它就會恢復。什麼是Chrome的交易？我如何防止它調整表的大小？

來源

2012-03-28 Andrew

好，安德魯，根據the jQuery doc for draggable（選項> appendTo）

傳遞給或由appendTo選項中選擇的元件將被拖動期間使用作爲拖動輔助的容器。默認情況下，輔助程序被附加到與可拖動相同的容器中。

問題是，我的理論是，您的新表格行正在被添加到舊錶格中，Chrome正在基於寬度進行更新。因此，如果您將appendTo選項設置爲包含div，那將解決您的問題！這裏是updated code。

來源

2012-03-29 21:13:26 Andrew

謝謝！我遇到了這個問題，你列出的解決方案解決了我的問題。 – djmccormick 2012-04-26 20:03:29

jQuery可拖動表格行在Chrome中調整表格大小

回答

相關問題