jQuery UI Current

by petersendidit

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Draggable 1</a></li>
        <li><a href="#tabs-2">Draggable 2</a></li>
    </ul>
    <div id="tabs-1">
        <div id="draggable" class="draggable valid_draggable1">valid_draggable1</div>
        <div id="draggable_invalid" class="draggable">Invalid draggable</div>
        <div id="droppable" class="droppable" style="background:#ccc; width:200px; height:200px;">Droppable 1</div>
        <p>
            To reproduce bug, go to tab <em>Draggable 2</em> 
            and drag <em>valid_draggable2</em>.<br/>
            After returning to <em>Draggable 1</em>, 
            <em>valid_draggable1</em> would revert on drop, 
            even it is valid for <em>droppable</em>.
        </p>
        <p>
            If tabs are not active, this bug does not occur.
        </p>    
    </div>
    <div id="tabs-2">
        <div id="draggable2" class="draggable valid_draggable2">valid_draggable2</div>
        <div id="droppable2" class="droppable" style="background:#ccc; width:100px; height:200px;">Droppable 2</div>
    </div>
</div>

JavaScript

$("#tabs").tabs();
$('.draggable').draggable({
    revert: 'invalid',
    helper: 'clone'
});

$('#droppable').droppable({
    accept: '.valid_draggable1',
    drop: function(event, ui) {
        ui.draggable.clone().appendTo($(this));
    }
});
$('#droppable2').droppable({
    accept: '.valid_draggable2',
    drop: function(event, ui) {
        ui.draggable.clone().appendTo($(this));
    }
});