Ticket #4971: draggables_in_tabs_with_accept.html

File draggables_in_tabs_with_accept.html, 2.1 kB (added by bmihelac, 4 months ago)
Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
6        <title>test_dragging_and_tabs</title>
7
8        <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
9        <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
10        <script type="text/javascript" src="../../../ui/ui.core.js"></script>
11        <script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
12        <script type="text/javascript" src="../../../ui/ui.droppable.js"></script>
13        <script type="text/javascript" src="../../../ui/ui.tabs.js"></script>
14       
15       
16        <script type="text/javascript">
17                $(function() {
18                        $("#tabs").tabs();
19                        $('.draggable').draggable({
20                                revert: 'invalid',
21                                helper: 'clone'
22                        });
23                       
24                        $('#droppable').droppable({
25                                accept: '.valid_draggable1',
26        drop: function(event, ui) {
27            ui.draggable.clone().appendTo($(this));
28        }
29                        });
30                        $('#droppable2').droppable({
31                                accept: '.valid_draggable2',
32        drop: function(event, ui) {
33            ui.draggable.clone().appendTo($(this));
34        }
35                        });
36                });
37                       
38                </script>
39</head>
40
41<body>
42       
43        <div id="tabs">
44                <ul>
45                        <li><a href="#tabs-1">Draggable 1</a></li>
46                        <li><a href="#tabs-2">Draggable 2</a></li>
47                </ul>
48                <div id="tabs-1">
49                       
50                        <div id="draggable" class="draggable valid_draggable1">valid_draggable1</div>
51                        <div id="draggable_invalid" class="draggable">Invalid draggable</div>
52                        <div id="droppable" class="droppable" style="background:#ccc; width:200px; height:200px;">Droppable 1</div>
53                       
54                        <p>
55                                To reproduce bug, go to tab <em>Draggable 2</em> and drag <em>valid_draggable2</em>.<br/>
56                                After returning to <em>Draggable 1</em>, <em>valid_draggable1</em> would revert on drop, even it is valid for <em>droppable</em>.
57                        </p>
58                        <p>
59                                If tabs are not active, this bug does not occur.
60                        </p>
61                       
62                </div>
63               
64                <div id="tabs-2">
65                        <div id="draggable2" class="draggable valid_draggable2">valid_draggable2</div>
66                        <div id="droppable2" class="droppable" style="background:#ccc; width:100px; height:200px;">Droppable 2</div>
67                </div>
68        </div>
69
70
71</body>
72</html>