Ticket #6072: drag.html

File drag.html, 4.2 KB (added by lklaus, 9 years ago)
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html>
3<head>
4
5<style>
6     .draggable {
7      float: left;
8      width: 100px;
9      height: 50px;
10      background-color: blue;
11      border: 1px solid #000000;
12      text-align: center;
13     }
14     .droppable {
15      float: left;
16      width: 100px;
17      height: 50px;
18      background-color: palegreen;
19      border: 1px solid #000000;
20     }
21     .highlight {
22      float: left;
23      width: 100px;
24      height: 50px;
25      background-color: limegreen;
26      border: 1px solid #000000;
27     }
28     .occupied {
29      float: left;
30      width: 100px;
31      height: 50px;
32      background-color: lightpink;
33      border: 1px solid #000000;
34     }
35    </style>
36
37<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
38<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
39<script type="text/javascript">
40    $(document).ready(function(){
41       
42        $( ".draggable" ).draggable( { 
43            snap: '.droppable', 
44            snapMode: 'inner',
45            snapTolerance: 25, 
46            revert: true
47        });
48        $( ".droppable" )
49                .droppable({
50                    drop: function( event, ui ) {
51                            $(this).removeClass( "droppable" );
52                            $(this).droppable('disable');
53                            $(this).addClass( "occupied" );
54                            $(ui.draggable).draggable( "option", "revert", "invalid" )   
55                        },
56                   
57                    // 1. out event is never triggered
58                    out: function( event, ui ) {
59                        $(this).removeClass( "occupied" ); 
60                        $(this).addClass( "droppable" );
61                        $(this).droppable('enable');
62                       
63                    },
64                    activate: function( event, ui) {
65                         
66                          // 2. try to uncomment...
67                          //$(this).addClass("highlight", 1000);
68
69                    }
70                })
71                   
72                .click( function( event, ui ) {
73                    if ($(this).hasClass("droppable")) {
74                        $(this).removeClass( "droppable" );
75                        $(this).droppable( 'disable' );
76                        $(this).addClass( "occupied" );
77                     
78                        var $newelem = $("<DIV class=\"draggable\" ><P>Drag me to my target</P></DIV>").appendTo($(this)).draggable({ 
79                            snap: '.droppable', 
80                            snapMode: 'inner',
81                            snapTolerance: 25, 
82                            revert: true
83                        });
84                    }
85                });
86        });
87                //$(this).text($(this).position().top);
88                //$(ui.draggable).css('position','absolute');
89                //$(ui.draggable).css('top',$(this).position().top);
90                //$(ui.draggable).css('left',$(this).position().left);
91                //$(ui.draggable).text( $(ui.draggable).position().top)
92
93</script>
94
95
96
97
98
99<title>Test</title>
100</head>
101<body>
102
103<table border=0 cellpadding=0 cellspacing=2 class="yes">
104<tr align=center height=40><td></td><td rowspan="9" width=150></td><td></td><td rowspan="9" width=150></td><td></td></tr> 
105<tr><td class=droppable></td><td class=droppable></td><td class=droppable></td></tr>
106<tr><td class=droppable></td><td class=droppable></td><td class=droppable></td></tr>
107<tr><td class=droppable></td><td class=droppable></td><td class=droppable></td></tr>
108<tr><td class=occupied></td><td class=droppable></td><td class=occupied></td></tr>
109<tr><td class=droppable></td><td class=droppable></td><td class=occupied></td></tr>
110<tr><td class=droppable></td><td class=occupied></td><td class=occupied></td></tr>
111<tr><td class=droppable></td><td class=droppable></td><td class=occupied></td></tr>
112<tr><td class=droppable></td><td class=droppable></td><td class=droppable></td></tr>
113</table>
114 
115</body>
116</html>