git.infodrom.org Git - infodrom/rico3/blob - examples/html/drag-and-drop-zones.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 \r
   3 <html>\r
   4 <head>\r
   5 <title>Rico TV Networks</title>\r
   6 \r
   7 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   8 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
   9 \r
  10 <script type='text/javascript'>\r
  11 var seAsia = ['Brunei','Cambodia','East Timor','Indonesia','Laos','Malaysia','Myanmar (Burma)','Philippines','Singapore','Thailand','Vietnam'];\r
  12 var eastAsia = ['People\'s Republic of China (PRC)','Hong Kong (China)','Japan','Macau (China)','Mongolia','North Korea','South Korea','Republic of China (Taiwan)'];\r
  13 \r
  14 var CustomDraggable;\r
  15 Rico.onLoad( function() {\r
  16   Rico.setDebugArea('logger');\r
  17   Rico.enableLogging();\r
  18   Rico.extend(CustomDraggable.prototype, new Rico.Draggable());\r
  19   Rico.extend(CustomDraggable.prototype, CustomDraggableMethods);\r
  20   \r
  21   // East Asia is zone 0\r
  22   PopulateZone(eastAsia, 'eastAsia', 0);\r
  23   Rico.registerDropZone( new Rico.Dropzone('EastAsiaDrop1'), 0);\r
  24   Rico.registerDropZone( new Rico.Dropzone('EastAsiaDrop2'), 0);\r
  25 \r
  26   // SE Asia is zone 1\r
  27   PopulateZone(seAsia, 'seAsia', 1);\r
  28   Rico.registerDropZone( new Rico.Dropzone('SEAsiaDrop1'), 1);\r
  29   Rico.registerDropZone( new Rico.Dropzone('SEAsiaDrop2'), 1);\r
  30 });\r
  31 \r
  32 function PopulateZone(names, id, zoneNumber) {\r
  33   var n=Rico.$(id);\r
  34   for ( var i=0; i < names.length; i++ ) {\r
  35     var d=document.createElement('div');\r
  36     d.id="d" + i;\r
  37     d.className='CustomDraggable';\r
  38     d.innerHTML=names[i];\r
  39     n.appendChild(d);\r
  40     Rico.registerDraggable( new CustomDraggable('Custom', d), zoneNumber );\r
  41   }\r
  42 }\r
  43 \r
  44 function CustomDraggable(type, htmlElement) {\r
  45   this.initialize(type, htmlElement);\r
  46 }\r
  47 \r
  48 var CustomDraggableMethods = {\r
  49 \r
  50   startDrag: function() {\r
  51     this.startParent=this.htmlElement.parentNode;
  52     Rico.log("startDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id +"]");\r
  53   },\r
  54   \r
  55   endDrag: function() {\r
  56     this.endParent=this.htmlElement.parentNode;
  57     Rico.log("endDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id + "] to [" + this.endParent.id + "]" );\r
  58   }\r
  59 \r
  60 }\r
  61 \r
  62 </script>\r
  63 \r
  64 <style type="text/css">\r
  65 p {\r
  66   font-size : 8pt;\r
  67 }\r
  68 \r
  69 .logBox {\r
  70   background-color : #ffffcc;\r
  71   border : 1px solid #8b8b8b;\r
  72   font-size : 8pt;\r
  73 }\r
  74 \r
  75 .listBox {\r
  76   padding: 5px;\r
  77   background-color : #ffffff;\r
  78   border : 1px solid #8b8b8b;\r
  79   width:200px;\r
  80   height:90px;\r
  81   overflow:auto;\r
  82 }\r
  83 .listBox * {\r
  84   margin: 0px;\r
  85   padding: 0px;\r
  86   font-size : 11px;\r
  87   font-family : Arial, Helvetica;\r
  88 }\r
  89 span.catHeader {\r
  90   font-family : Arial;\r
  91   font-weight : bold;\r
  92   font-size : 11px;\r
  93   color : #5b5b5b;\r
  94   margin-left : 8px;\r
  95   margin-top : 12px;\r
  96   display : block;\r
  97 }\r
  98 .zone {\r
  99   display:inline;\r
 100   margin-left:8px;\r
 101   margin-bottom:8px;\r
 102   float:left;\r
 103 }\r
 104 div.CustomDraggable {\r
 105   z-index:10;\r
 106   color: blue;\r
 107 }\r
 108 </style>\r
 109 </head>\r
 110 \r
 111 \r
 112 <body>\r
 113 \r
 114 <h1>Rico Drag-and-Drop: Separate Drop Zones</h1>\r
 115 \r
 116 <p>Base Library: \r
 117 <script type='text/javascript'>\r
 118 document.write(Rico.Lib+' '+Rico.LibVersion);\r
 119 </script>\r
 120 </p>\r
 121 \r
 122 <p>This example demonstrates how to set up distinct drop zones. Watch the log messages!</p>\r
 123 \r
 124 <div id="exampleContainer" style="float:left;background-color:#DDD; width: 680px;">\r
 125 \r
 126 <div>\r
 127 <div id="drag1" class='zone'>\r
 128   <span class="catHeader">East Asia</span>\r
 129   <div class="listBox" id="eastAsia"></div>\r
 130 </div>\r
 131 \r
 132 <div id="dropBox1a" class='zone'>\r
 133   <span class="catHeader">East Asia Drop 1</span>\r
 134   <div class="listBox" id="EastAsiaDrop1"></div>\r
 135 </div>\r
 136 \r
 137 <div id="dropBox1b" class='zone'>\r
 138   <span class="catHeader">East Asia Drop 2</span>\r
 139   <div class="listBox" id="EastAsiaDrop2"></div>\r
 140 </div>\r
 141 \r
 142 </div>\r
 143 \r
 144 <div style='clear:both'>\r
 145 <div id="drag2" class='zone'>\r
 146   <span class="catHeader">SE Asia</span>\r
 147   <div class="listBox" id="seAsia"></div>\r
 148 </div>\r
 149 \r
 150 <div id="dropBox2a" class='zone'>\r
 151   <span class="catHeader">SE Asia Drop 1</span>\r
 152   <div class="listBox" id="SEAsiaDrop1"></div>\r
 153 </div>\r
 154 \r
 155 <div id="dropBox2b" class='zone'>\r
 156   <span class="catHeader">SE Asia Drop 2</span>\r
 157   <div class="listBox" id="SEAsiaDrop2"></div>\r
 158 </div>\r
 159 </div>\r
 160 \r
 161 <div style="clear:both;margin:8px;">\r
 162   <span id='loghead' class="catHeader">drag-n-drop message log:</span>\r
 163   <textarea class="logBox" id="logger" rows='7' cols='80'></textarea>\r
 164 </div>\r
 165 \r
 166 </div>\r
 167 </body>\r
 168 </html>\r