Question

我用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>

我还根据之前的代码制作了this jsfiddle。在chrome中，它会调整桌面的大小。但是，如果我去检查桌子，它会在我点击它后立即弹回。什么是Chrome合约？如何防止它重新调整表格？

Answer 1

嗯，安德鲁，根据the jQuery doc for draggable（选项＆gt; appendTo），

将使用传递给appendTo选项或由appendTo选项选择的元素作为拖动过程中可拖动的助手的容器。默认情况下 helper将附加到与draggable相同的容器中。

我认为问题是，您的新表格行正在添加到旧表格中，而Chrome正在根据其宽度进行更新。因此，如果您将appendTo选项设置为包含div，那将解决您的问题！这是updated code。

jQuery可拖动表格行在Chrome中调整表格大小

1 个答案: