git.infodrom.org Git - infodrom/rico3/blob - examples/html/drag-and-drop-log.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 names = [ "CNN", "ZDF", "BBC", "MTV", "CBS", "NHK" ];\r
  12 var CustomDraggable;\r
  13 Rico.onLoad( function() {\r
  14   Rico.setDebugArea('logger');\r
  15   Rico.enableLogging();\r
  16   Rico.extend(CustomDraggable.prototype, new Rico.Draggable());\r
  17   Rico.extend(CustomDraggable.prototype, CustomDraggableMethods);\r
  18 \r
  19   PopulateZone(names, 'nameList', 0);\r
  20   // 0 is the default zone number, so it can be left out in the subsequent calls to registerDropZone\r
  21   Rico.registerDropZone( new Rico.Dropzone('dropZone1'));\r
  22   Rico.registerDropZone( new Rico.Dropzone('dropZone2'));\r
  23   Rico.registerDropZone( new Rico.Dropzone('nameListDeleted'));\r
  24 });\r
  25 \r
  26 function PopulateZone(names, id, zoneNumber) {\r
  27   var n=Rico.$(id);\r
  28   for ( var i=0; i < names.length; i++ ) {\r
  29     var d=document.createElement('div');\r
  30     d.className='CustomDraggable';\r
  31     d.innerHTML=names[i];\r
  32     n.appendChild(d);\r
  33     Rico.registerDraggable( new CustomDraggable('Custom', d), zoneNumber );\r
  34   }\r
  35 }\r
  36 \r
  37 function CustomDraggable(type, htmlElement) {\r
  38   this.initialize(type, htmlElement);\r
  39 }\r
  40 \r
  41 var CustomDraggableMethods = {\r
  42 \r
  43   startDrag: function() {\r
  44     this.startParent=this.htmlElement.parentNode;
  45     Rico.log("startDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id +"]");\r
  46   },\r
  47   \r
  48   endDrag: function() {\r
  49     this.endParent=this.htmlElement.parentNode;
  50     Rico.log("endDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id + "] to [" + this.endParent.id + "]" );\r
  51   }\r
  52 \r
  53 }\r
  54 \r
  55 </script>\r
  56 \r
  57 <style type="text/css">\r
  58 p {\r
  59   font-size : 8pt;\r
  60 }\r
  61 \r
  62 .logBox {\r
  63   background-color : #ffffcc;\r
  64   border : 1px solid #8b8b8b;\r
  65   font-size : 8pt;\r
  66 }\r
  67 \r
  68 .listBox {\r
  69   padding: 5px;\r
  70   background-color : #ffffff;\r
  71   border : 1px solid #8b8b8b;\r
  72   width:200px;\r
  73   height:90px;\r
  74   overflow:auto;\r
  75 }\r
  76 .listBox * {\r
  77   margin: 0px;\r
  78   padding: 0px;\r
  79   font-size : 11px;\r
  80   font-family : Arial, Helvetica;\r
  81 }\r
  82 span.catHeader {\r
  83   font-family : Arial;\r
  84   font-weight : bold;\r
  85   font-size : 11px;\r
  86   color : #5b5b5b;\r
  87   margin-left : 8px;\r
  88   margin-top : 12px;\r
  89   display : block;\r
  90 }\r
  91 .zone {\r
  92   display:inline;\r
  93   margin-left:8px;\r
  94   margin-bottom:8px;\r
  95   float:left;\r
  96 }\r
  97 div.CustomDraggable {\r
  98   z-index:10;\r
  99   color: blue;\r
 100 }\r
 101 </style>\r
 102 </head>\r
 103 \r
 104 \r
 105 <body>\r
 106 \r
 107 <h1>Rico Drag-and-Drop: TV Networks</h1>\r
 108 \r
 109 <p>Base Library: \r
 110 <script type='text/javascript'>\r
 111 document.write(Rico.Lib+' '+Rico.LibVersion);\r
 112 </script>\r
 113 </p>\r
 114 \r
 115 <p>This example demonstrates how to track drop-and-drop objects as they are moved by the user. Watch the log messages!</p>\r
 116 \r
 117 <div id="exampleContainer" style="float:left;background-color:#DDD;">\r
 118 \r
 119 <div>\r
 120 <div id="dragBox" class='zone'>\r
 121   <span class="catHeader">Channels</span>\r
 122   <div class="listBox" id="nameList"></div>\r
 123 </div>\r
 124 \r
 125 <div id="deleteZone" class='zone'>\r
 126   <span class="catHeader">Delete zone</span>\r
 127   <div class="listBox" id="nameListDeleted"></div>\r
 128 </div>\r
 129 </div>\r
 130 \r
 131 <div style='clear:both'>\r
 132 <div id="dropBox1" class='zone'>\r
 133   <span class="catHeader">Drop1</span>\r
 134   <div class="listBox" id="dropZone1"></div>\r
 135 </div>\r
 136 \r
 137 <div id="dropBox2" class='zone'>\r
 138   <span class="catHeader">Drop2</span>\r
 139   <div class="listBox" id="dropZone2"></div>\r
 140 </div>\r
 141 </div>\r
 142 \r
 143 <div style="clear:both;margin:8px;">\r
 144   <span id='loghead' class="catHeader">drag-n-drop message log:</span>\r
 145   <textarea class="logBox" id="logger" rows='7' cols='80'></textarea>\r
 146 </div>\r
 147 \r
 148 </div>\r
 149 </body>\r
 150 </html>\r