1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
5 <title>Rico TV Networks</title>
\r
7 <script src="LoadRicoClient.js" type="text/javascript"></script>
\r
8 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
10 <script type='text/javascript'>
\r
11 Rico.loadModule('DragAndDrop');
\r
13 var seAsia = ['Brunei','Cambodia','East Timor','Indonesia','Laos','Malaysia','Myanmar (Burma)','Philippines','Singapore','Thailand','Vietnam'];
\r
14 var eastAsia = ['People\'s Republic of China (PRC)','Hong Kong (China)','Japan','Macau (China)','Mongolia','North Korea','South Korea','Republic of China (Taiwan)'];
\r
16 var CustomDraggable;
\r
17 Rico.onLoad( function() {
\r
18 Rico.setDebugArea('logger');
\r
19 Rico.enableLogging();
\r
20 Rico.extend(CustomDraggable.prototype, new Rico.Draggable());
\r
21 Rico.extend(CustomDraggable.prototype, CustomDraggableMethods);
\r
23 // East Asia is zone 0
\r
24 PopulateZone(eastAsia, 'eastAsia', 0);
\r
25 Rico.registerDropZone( new Rico.Dropzone('EastAsiaDrop1'), 0);
\r
26 Rico.registerDropZone( new Rico.Dropzone('EastAsiaDrop2'), 0);
\r
28 // SE Asia is zone 1
\r
29 PopulateZone(seAsia, 'seAsia', 1);
\r
30 Rico.registerDropZone( new Rico.Dropzone('SEAsiaDrop1'), 1);
\r
31 Rico.registerDropZone( new Rico.Dropzone('SEAsiaDrop2'), 1);
\r
34 function PopulateZone(names, id, zoneNumber) {
\r
36 for ( var i=0; i < names.length; i++ ) {
\r
37 var d=document.createElement('div');
\r
39 d.className='CustomDraggable';
\r
40 d.innerHTML=names[i];
\r
42 Rico.registerDraggable( new CustomDraggable('Custom', d), zoneNumber );
\r
46 function CustomDraggable(type, htmlElement) {
\r
47 this.initialize(type, htmlElement);
\r
50 var CustomDraggableMethods = {
\r
52 startDrag: function() {
\r
53 this.startParent=this.htmlElement.parentNode;
54 Rico.log("startDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id +"]");
\r
57 endDrag: function() {
\r
58 this.endParent=this.htmlElement.parentNode;
59 Rico.log("endDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id + "] to [" + this.endParent.id + "]" );
\r
66 <style type="text/css">
\r
72 background-color : #ffffcc;
\r
73 border : 1px solid #8b8b8b;
\r
79 background-color : #ffffff;
\r
80 border : 1px solid #8b8b8b;
\r
89 font-family : Arial, Helvetica;
\r
92 font-family : Arial;
\r
106 div.CustomDraggable {
\r
116 <h1>Rico Drag-and-Drop: Separate Drop Zones</h1>
\r
119 <script type='text/javascript'>
\r
120 document.write(Rico.Lib+' '+Rico.LibVersion);
\r
124 <p>This example demonstrates how to set up distinct drop zones. Watch the log messages!</p>
\r
126 <div id="exampleContainer" style="float:left;background-color:#DDD; width: 680px;">
\r
129 <div id="drag1" class='zone'>
\r
130 <span class="catHeader">East Asia</span>
\r
131 <div class="listBox" id="eastAsia"></div>
\r
134 <div id="dropBox1a" class='zone'>
\r
135 <span class="catHeader">East Asia Drop 1</span>
\r
136 <div class="listBox" id="EastAsiaDrop1"></div>
\r
139 <div id="dropBox1b" class='zone'>
\r
140 <span class="catHeader">East Asia Drop 2</span>
\r
141 <div class="listBox" id="EastAsiaDrop2"></div>
\r
146 <div style='clear:both'>
\r
147 <div id="drag2" class='zone'>
\r
148 <span class="catHeader">SE Asia</span>
\r
149 <div class="listBox" id="seAsia"></div>
\r
152 <div id="dropBox2a" class='zone'>
\r
153 <span class="catHeader">SE Asia Drop 1</span>
\r
154 <div class="listBox" id="SEAsiaDrop1"></div>
\r
157 <div id="dropBox2b" class='zone'>
\r
158 <span class="catHeader">SE Asia Drop 2</span>
\r
159 <div class="listBox" id="SEAsiaDrop2"></div>
\r
163 <div style="clear:both;margin:8px;">
\r
164 <span id='loghead' class="catHeader">drag-n-drop message log:</span>
\r
165 <textarea class="logBox" id="logger" rows='7' cols='80'></textarea>
\r