jQuery draggable table row resizes table в Chrome

Я сделал таблицу, перетаскиваемую с помощью jQuery. Он работает как ожидается (в основном) в Firefox и IE. Однако в Chrome он по какой-то причине изменяет размер оригинальной таблицы.jQuery draggable table row resizes table в 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? Как удержать его от изменения размера таблицы?

источник

2012-03-28 Andrew

Ну, Андрей, по the jQuery doc for draggable (опции> appendTo),

элемент передается или выбранный вариант appendTo будет использоваться в качестве контейнера перетаскиваемую Helper во время перетаскивания. По умолчанию помощник добавляется к тому же контейнеру, что и перетаскиваемый.

Проблема, теоретизирую, заключается в том, что ваша новая строка таблицы добавляется в старую таблицу, а Chrome обновляется по ширине. Таким образом, если вы установите параметр appendTo в содержащий div, это решит вашу проблему! Вот updated code.

источник

2012-03-29 21:13:26 Andrew

Спасибо! У меня была эта проблема, и решение, которое вы изложили, решило мою проблему. – djmccormick

jQuery draggable table row resizes table в Chrome

ответ

Смежные вопросы