jQuery UI drag and drop with tabs - drag an element from tabs to droppable area, draggable disappears when a different tab is clicked

Question

What i have is jquery ui tabs set up with draggable elements in them, i also have a droppable area to the right hand side of the tabs.

I can drag and drop my elements from the tabs to the droppable area. But if i click on a different tab, the element that i have dragged from a previous tab disappears from the droppable area until i click back on the tab that the draggable is from.

I need to keep any elements that i have dragged from the tabs to the droppable area visible while i click between different tabs.

I will set up a jsfiddle if requested but hopefully I've explained myself enough not to warent this

thanks in advance, Finbar

Answer 1

I already reproduced the problem ;)

This is because tabs hide the container and all it's content on change. Even if you try to set items to show using activate event since main container is already hidden it won't show individual items. So you have to literally move draggable items into droppable area. Here is the code.

HTML

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a>

        </li>
        <li><a href="#fragment-2"><span>Two</span></a>

        </li>
        <li><a href="#fragment-3"><span>Three</span></a>

        </li>
    </ul>
    <div id="fragment-1">
        <div id="draggable" class="ui-widget-content">
            <p>Drag me to my target</p>
        </div>
    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

CSS

#draggable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    margin: 10px 10px 10px 0;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    margin: 10px;
}

JQuery

$("#tabs").tabs();
$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        var $x = ui.draggable;
        $x.appendTo($("#droppable")).css({
            top:0,
            left:0
        });
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});

Fiddle

JSFiddle Example