Question

I am using the jQuery UI sortable feature with a connected list through tabs. The jQuery code that initializes this is as follows:

$( "#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6, #sortable7, #sortable8, #sortable9, #sortable10" ).
    sortable({ 
        placeholder: 'sortable-placeholder', 
        forcePlaceholderSize: true, 
        opacity: 0.7
});

$('.tabs').tabs();
var $tabs = $( ".tabs" ).tabs('paging', { follow: true, followOnSelect: true, tabsPerPage: 5});

var $tab_items = $( "ul:first li", $tabs ).droppable({
    tolerance: "pointer",
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) {
        var $item = $( this );
        var $list = $( $item.find( "a" ).attr( "href" ) )
            .find( ".connectedSortable" );

        ui.draggable.hide( "fast", function() {
            $tabs.tabs( "select", $tab_items.index( $item.prev() ) );
            $( this ).appendTo( $list ).show( "fast" );
        });
    }
});

The sorting, drag and dropping works beautifully. The issue is with the opacity. When I sort on the same tab, the original element comes back (I am assuming the helper is eliminated). BUT when I drag the list item to another tab, the opacity remains (I am assuming the helper is element that is dropped in this case). Can someone point me in the right direction?

Any comments or suggestions would be greatly appreciated.

Thanks!

Answer 1

I figured it out. The opacity can simply be changed back via .css(). I could have sworn I tried this before and it didn’t work but it did!

$( this ).appendTo( $list ).show().css({'opacity':'1'});