Issue with Drag n Drop table re-ordering.

[bgibilaro-2]

Hello,

I am having an issue with a jQuery UI script I am trying to write that
will allow me to do drag and drop re-ordering of a table's columns. (I
am a big of a jQuery noob, so excuse if I am missing anything
obvious).

You can see the issue I am having if you go to
http://www.crazymutthosting.com/jQueryTesting/testing2.html. Try
dragging one of the column headers (defined as draggable) over one of
the yellow column separators (defined as droppable).

The column is moved after the droppable target (cloned and inserted,
actually) and, currently, the original column is simply hidden,
although I plan to remove it all together in the final version.
However, you will notice that they header is moved far off to the
right. It is almost as if when it clones the column header, it is also
cloning the offset value and applying that to the new one.

Here is my jQuery code:

//set all th elements in the header row to be draggable items...
$("tr.rpt_header_row th").not('.sep').draggable({ revert: 'valid' });

$(".sep").droppable({
        tolerance: 'touch',
        hoverClass: 'ui-state-hover',
        over: function(event, ui) {
            $(this).css('width', ''+$(ui.draggable).width()+'px');
        },
        out: function(event, ui) {
            $(this).css('width', '1px');
        },
        drop: function(event, ui) {
            //get the index of the column we want to move and the
column we are placing it after...
            var iDraggable = $(ui.draggable).prevAll().length + 1;
            var iDroppable = $(this).prevAll().length;

            $('tblTest').add('td:nth-child(' + iDraggable + '),th:nth-
child(' + iDraggable + ')').each(
                function() {
                    $(this).prev().add($(this)).clone
(false).insertAfter($(this).parent().children('td,th').eq(iDroppable -
1));
                    $(this).hide();
                    $(this).prev('td,th').hide();
                }
            );
        }
    });

Any help would be greatly appreciated.

Bob Gibilaro

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=.

[bgibilaro-2]

Well, I managed to figure this one out myself. I ended up adding the
following line to my drop funciton:

$(ui.helper).remove();

I also changed the helper option in the draggable declaration to
"clone".

This appears to have done the trick.

Thanks!

Bob

On Nov 9, 9:32 am, bgibilaro <bgibil...@...> wrote:

> Hello,
>
> I am having an issue with a jQuery UI script I am trying to write that
> will allow me to do drag and drop re-ordering of a table's columns. (I
> am a big of a jQuery noob, so excuse if I am missing anything
> obvious).
>
> You can see the issue I am having if you go tohttp://www.crazymutthosting.com/jQueryTesting/testing2.html. Try
> dragging one of thecolumnheaders (defined as draggable) over one of
> the yellowcolumnseparators (defined as droppable).
>
> Thecolumnis moved after the droppable target (cloned and inserted,
> actually) and, currently, the originalcolumnis simply hidden,
> although I plan to remove it all together in the final version.
> However, you will notice that they header is moved far off to the
> right. It is almost as if when it clones thecolumnheader, it is also
> cloning the offset value and applying that to the new one.
>
> Here is my jQuery code:
>
> //set all th elements in the header row to be draggable items...
> $("tr.rpt_header_row th").not('.sep').draggable({ revert: 'valid' });
>
> $(".sep").droppable({
>         tolerance: 'touch',
>         hoverClass: 'ui-state-hover',
>         over: function(event, ui) {
>             $(this).css('width', ''+$(ui.draggable).width()+'px');
>         },
>         out: function(event, ui) {
>             $(this).css('width', '1px');
>         },
>         drop: function(event, ui) {
>             //get the index of thecolumnwe want to move and thecolumnwe are placing it after...
>             var iDraggable = $(ui.draggable).prevAll().length + 1;
>             var iDroppable = $(this).prevAll().length;
>
>             $('tblTest').add('td:nth-child(' + iDraggable + '),th:nth-
> child(' + iDraggable + ')').each(
>                 function() {
>                     $(this).prev().add($(this)).clone
> (false).insertAfter($(this).parent().children('td,th').eq(iDroppable -
> 1));
>                     $(this).hide();
>                     $(this).prev('td,th').hide();
>                 }
>             );
>         }
>     });
>
> Any help would be greatly appreciated.
>
> Bob Gibilaro

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=.