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