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 Rico.loadModule('DragAndDrop');\r
  12 \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
  15 \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
  22   \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
  27 \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
  32 });\r
  33 \r
  34 function PopulateZone(names, id, zoneNumber) {\r
  35   var n=Rico.$(id);\r
  36   for ( var i=0; i < names.length; i++ ) {\r
  37     var d=document.createElement('div');\r
  38     d.id="d" + i;\r
  39     d.className='CustomDraggable';\r
  40     d.innerHTML=names[i];\r
  41     n.appendChild(d);\r
  42     Rico.registerDraggable( new CustomDraggable('Custom', d), zoneNumber );\r
  43   }\r
  44 }\r
  45 \r
  46 function CustomDraggable(type, htmlElement) {\r
  47   this.initialize(type, htmlElement);\r
  48 }\r
  49 \r
  50 var CustomDraggableMethods = {\r
  51 \r
  52   startDrag: function() {\r
  53     this.startParent=this.htmlElement.parentNode;
  54     Rico.log("startDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id +"]");\r
  55   },\r
  56   \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
  60   }\r
  61 \r
  62 }\r
  63 \r
  64 </script>\r
  65 \r
  66 <style type="text/css">\r
  67 p {\r
  68   font-size : 8pt;\r
  69 }\r
  70 \r
  71 .logBox {\r
  72   background-color : #ffffcc;\r
  73   border : 1px solid #8b8b8b;\r
  74   font-size : 8pt;\r
  75 }\r
  76 \r
  77 .listBox {\r
  78   padding: 5px;\r
  79   background-color : #ffffff;\r
  80   border : 1px solid #8b8b8b;\r
  81   width:200px;\r
  82   height:90px;\r
  83   overflow:auto;\r
  84 }\r
  85 .listBox * {\r
  86   margin: 0px;\r
  87   padding: 0px;\r
  88   font-size : 11px;\r
  89   font-family : Arial, Helvetica;\r
  90 }\r
  91 span.catHeader {\r
  92   font-family : Arial;\r
  93   font-weight : bold;\r
  94   font-size : 11px;\r
  95   color : #5b5b5b;\r
  96   margin-left : 8px;\r
  97   margin-top : 12px;\r
  98   display : block;\r
  99 }\r
 100 .zone {\r
 101   display:inline;\r
 102   margin-left:8px;\r
 103   margin-bottom:8px;\r
 104   float:left;\r
 105 }\r
 106 div.CustomDraggable {\r
 107   z-index:10;\r
 108   color: blue;\r
 109 }\r
 110 </style>\r
 111 </head>\r
 112 \r
 113 \r
 114 <body>\r
 115 \r
 116 <h1>Rico Drag-and-Drop: Separate Drop Zones</h1>\r
 117 \r
 118 <p>Base Library: \r
 119 <script type='text/javascript'>\r
 120 document.write(Rico.Lib+' '+Rico.LibVersion);\r
 121 </script>\r
 122 </p>\r
 123 \r
 124 <p>This example demonstrates how to set up distinct drop zones. Watch the log messages!</p>\r
 125 \r
 126 <div id="exampleContainer" style="float:left;background-color:#DDD; width: 680px;">\r
 127 \r
 128 <div>\r
 129 <div id="drag1" class='zone'>\r
 130   <span class="catHeader">East Asia</span>\r
 131   <div class="listBox" id="eastAsia"></div>\r
 132 </div>\r
 133 \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
 137 </div>\r
 138 \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
 142 </div>\r
 143 \r
 144 </div>\r
 145 \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
 150 </div>\r
 151 \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
 155 </div>\r
 156 \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
 160 </div>\r
 161 </div>\r
 162 \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
 166 </div>\r
 167 \r
 168 </div>\r
 169 </body>\r
 170 </html>\r