JQuery UI draggable-sortable does not work inside an initially inactive tab (jquery ui tabs)?

You can use the tabsshow event on the tabs to bind the drag'n'drop stuff jsfiddle.net/kMZPR/1 : function initDnD(event, ui) { if(ui. Index! = 2) return; jQuery(".

Sortable . Target"). Sortable({ opacity: 0.5 }); jQuery(".

Sortable . Item, . Toolbar .

Item"). DisableSelection(); jQuery(". Toolbar .

Item"). Draggable({ connectToSortable: ". Sortable .

Target", helper: "clone", revert: "invalid" }); jQuery('#tabs'). Unbind('tabsshow', initDnD); } jQuery(function() { jQuery("#tabs"). Tabs({ selected: 0 }).

Bind('tabsshow', initDnD); }) Note that this unbinds the event as soon as it has done its work, there's no need to keep calling this over and over again; this is also why the tabsshow event handler is in a separate named function BTW Also, it looks like the jQuery-UI tabs don't call the tabsshow event handlers for the initially selected tab. If you want the "Three" tab selected initially then it looks like you're better off doing it by hand rather than through the options: jQuery("#tabs").tabs(). Bind('tabsshow', initDnD); jQuery("#tabs").

Tabs('select', 2); // Ensure that the event gets triggered You're not doing anything like this in your example, just something that you should be aware off This is a fairly common technique when you're dealing with things that need to be fully realized/visible/positioned before they can have extra functionality added.

You can use the tabsshow event on the tabs to bind the drag'n'drop stuff, jsfiddle.net/kMZPR/1/: function initDnD(event, ui) { if(ui. Index! = 2) return; jQuery(".

Sortable . Target"). Sortable({ opacity: 0.5 }); jQuery(".

Sortable . Item, . Toolbar .

Item"). DisableSelection(); jQuery(". Toolbar .

Item"). Draggable({ connectToSortable: ". Sortable .

Target", helper: "clone", revert: "invalid" }); jQuery('#tabs'). Unbind('tabsshow', initDnD); } jQuery(function() { jQuery("#tabs"). Tabs({ selected: 0 }).

Bind('tabsshow', initDnD); }); Note that this unbinds the event as soon as it has done its work, there's no need to keep calling this over and over again; this is also why the tabsshow event handler is in a separate named function BTW. Also, it looks like the jQuery-UI tabs don't call the tabsshow event handlers for the initially selected tab. If you want the "Three" tab selected initially then it looks like you're better off doing it by hand rather than through the options: jQuery("#tabs").tabs().

Bind('tabsshow', initDnD); jQuery("#tabs"). Tabs('select', 2); // Ensure that the event gets triggered You're not doing anything like this in your example, just something that you should be aware off. This is a fairly common technique when you're dealing with things that need to be fully realized/visible/positioned before they can have extra functionality added.

Wait till the tab is clicked on to activate your draggable/sortable. So, give your tab-3 link an id: Three And then, change your jQuery to activate your draggable/sortable on click: jQuery(function() { jQuery( "#tabs" ). Tabs({ selected: 0 }); $('#tab3').

Click(function() { jQuery(". Sortable . Target").

Sortable({ opacity: 0.5 }); jQuery(". Sortable . Item, .

Toolbar . Item"). DisableSelection(); jQuery(".

Toolbar . Item"). Draggable({ connectToSortable: ".

Sortable . Target", helper: "clone", revert: "invalid" }); }); }).

1 Close but not quite there. The above will rewire all the draggable stuff every time tab 3 is clicked rather than just once as is needed. Also, jQuery-UI has custom events for these things and binding a click handler by hand is sort of going behind its back, using the custom events would be pendantically correct.

– mu is too short Dec 13 '10 at 0:42 @mu is too short Good info. – matthewpavkov Dec 13 '10 at 0:50 Using $('#tab3'). One('click', ... instead of $('#tab3').

Click(... would only execute the D'n'D stuff once. The pedants would still be upset but that's what pedants are for. – mu is too short Dec 13 '10 at 4:31.

I know i'm a couple months late, but I just encountered this issue.. Besides this post, I also found this jqueryui ticket while searching on the web... In the ticket a work-around is suggested: $( ". Draggable-class-name"). Draggable({ connectToSortable: ".

Sortable-class-name", // other options here start: function(event, ui) { $( ". Sortable-class-name" ). Sortable("refresh"); } }); The work-around seems to work ok.

This should help a bit, at least until the jqueryui team gets to solving it. Hope this is useful.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.