Ticket #6085: precedence.html

File precedence.html, 1.2 KB (added by sslotsky, 11 years ago)
Line 
1<html>
2        <head>
3                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
4                <script type="text/javascript" src="./js/js/jquery-ui-1.8.4.custom.min.js"></script>
5                <style type="text/css">
6                        #container {
7                                width: 200px;
8                                height: 200px;
9                                border-style: solid;
10                        }
11                       
12                        .box {
13                                width: 100px;
14                                height: 100px;
15                                background-color: orange;
16                        }
17                </style>
18        </head>
19        <body>
20                <div class="draggable">Drag me!</div>
21                <div id="container"></div>
22               
23                <script type="text/javascript">
24                        function secondDropFunction(event, ui) {
25                                alert("You'll never get here!");
26                        }
27                       
28                        function dropFunction(event, ui) {     
29                                alert("This is the container's drop function. It fires every time, even when you're trying to drop into an orange box, which should be droppable");
30                                $(document.createElement('div'))
31                                        .addClass('box')
32                                        .appendTo($(this))
33                                        .droppable({
34                                                accept: '.draggable', 
35                                                drop: secondDropFunction 
36                                        });
37                        }
38                       
39                        $('.draggable').draggable({helper: 'clone'});
40                       
41                        $('#container').droppable({
42                                accept: '.draggable',
43                                drop: dropFunction
44                        });
45                               
46                </script>
47        </body>
48</html>