Ticket #4971: draggables_in_tabs_with_accept.html

File draggables_in_tabs_with_accept.html, 2.1 KB (added by bmihelac, November 23, 2009 12:24PM UTC)
<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>test_dragging_and_tabs</title>

	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
	<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
	<script type="text/javascript" src="../../../ui/ui.droppable.js"></script>
	<script type="text/javascript" src="../../../ui/ui.tabs.js"></script>
	
	
	<script type="text/javascript">
		$(function() {
			$("#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));
        }
			});
		});
			
		</script>
</head>

<body>
	
	<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>


</body>
</html>

Download in other formats:

Original Format