Question

I tried everything I know to solve this problem, but no success. My site is working completely in IE and FF. in Chrome there is a little glitch – without a reason.

I have two tables. A source table and a destination one. I am dragging table-rows (tr) from source to destination or inside the destination table.
When I start dragging the row, it is cloned by a self-made helper to drag it freely around.

helper: function(event){
/* HERE IS THE PROBLEM */
   return $('<div class="dragged-row"><table></table></div>')
          .find('table').append($(event.target).closest('tr').clone().addClass("dragged-row")).end();
},

(I got this code from the internet)

When I use the helper ‘clone’ instead, the problem is gone, but my class is not applied (the purple background-color).

I have created a minimized example on http://jsfiddle.net/jt3LX/

You can drag one row. If you start dragging, both lines will get purple (this is wanted). But in chrome the first row of the table is getting BIG (why????).

Could you help me with one (or both) of these possibilities:

• Find another way to make the background of the source purple,
• Find the problem of the “bigging the first row”-glitch.

Many thanks,
Michael

Answer 1

Use this line instead : return $(this).addClass("dragged-row").clone();

http://jsfiddle.net/jt3LX/2/

    $(".drag tr").not(".tableHead").draggable({
        helper: function(event){
            /* HERE IS THE PROBLEM */
            return $(this).addClass("dragged-row").clone();
        },
        start: function(event, ui){
            $(this).css("background-color", "#aaaaff");

            c.tr = this;
            c.helper = ui.helper;
        },
        stop: function(event, ui){
            $(this).css("background-color", '');

            c.tr = null;
            c.helper = null;
        }
    });

Tested on FF, IE9 and Chrome