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中调整表格大小

回答

相关问题