Home/ Questions/Q 7747199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T10:28:12+00:00

I have made a table row draggable with jQuery. It works as expected (mostly)

  • 0

I have made a table row draggable with jQuery. It works as expected (mostly) in Firefox and IE. However, in Chrome it resizes the original table for some reason. 

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

I also made this jsfiddle base on the previous code. In chrome it resizes the table. However, if I go to inspect the table, it snaps back as soon as I click it. What’s the deal Chrome? How do I keep it from resizing the table?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, Andrew, according to the jQuery doc for draggable (options > appendTo),

    The element passed to or selected by the appendTo option will be used
    as the draggable helper’s container during dragging. By default, the
    helper is appended to the same container as the draggable.

    The problem, I theorize, is that your new table row is being added to the old table and Chrome is updating based on the width of that. Thus, if you set the appendTo option to a containing div, that will solve your problem! Here is the updated code.

    • 0