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

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2
   3 <html>
   4 <head>\r
   5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   6 <title>Rico - Drag and Drop</title>
   7
   8 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   9 \r
  10 <script type='text/javascript'>\r
  11 Rico.onLoad( function() {\r
  12    Rico.Corner.round('exampleContainer');\r
  13    logger=Rico.$('logger');\r
  14    logger.value='';\r
  15 \r
  16   // initialize all 4 grids with the same options\r
  17   \r
  18   var opts = {  \r
  19     useUnformattedColWidth: false,\r
  20     visibleRows  : 'parent',\r
  21     columnSpecs  : [{Hdg:'Last Name', canDrag:true,width:100},\r
  22                     {Hdg:'First Name', canDrag:true,width:100}]\r
  23   };\r
  24   for (var i=0; i<4; i++) {\r
  25     buffer[i]=new Rico.Buffer.Base();\r
  26     grid[i]=new Rico.LiveGrid (grid_ids[i], buffer[i], opts);\r
  27   }\r
  28   \r
  29   // load data into the first grid\r
  30   \r
  31   buffer[0].loadRowsFromArray(names);\r
  32   buffer[0].fetch(0);\r
  33 \r
  34   // initialize the drop zones (the other 3 grids)\r
  35   \r
  36   GridDropzone.prototype = Rico.extend(new Rico.Dropzone(), GridDropzoneMethods);\r
  37   Rico.registerDropZone( new GridDropzone(grid[1]));\r
  38   Rico.registerDropZone( new GridDropzone(grid[2]));\r
  39   Rico.registerDropZone( new GridDropzone(grid[3]));\r
  40 });\r
  41 \r
  42 \r
  43 var names = [ ["Holloman", "Debbie"],\r
  44               ["Barnes", "Pat"], \r
  45               ["Dampier", "Joan"], \r
  46               ["Alvarez", "Randy"],\r
  47               ["Neil", "William"], \r
  48               ["Hardoway", "Kimber"],\r
  49               ["Story", "Leslie"],\r
  50               ["Lott", "Charlie"],\r
  51               ["Patton", "Sabrina"], \r
  52               ["Lopez", "Juan" ] ];\r
  53 \r
  54 var grid_ids=['grid1','grid2','grid3','grid4']\r
  55 var CustomDraggable, logger, grid=[], buffer=[];\r
  56 \r
  57 \r
  58 function GridDropzone(grid) {\r
  59   this.initialize(grid);\r
  60 };\r
  61 \r
  62 var GridDropzoneMethods = {\r
  63 \r
  64   initialize: function( grid ) {\r
  65     this.liveGrid     = grid;\r
  66     this.htmlElement  = grid.outerDiv;\r
  67     this.absoluteRect = null;\r
  68   },\r
  69 \r
  70   accept: function(draggableObjects) {\r
  71     for ( var i = 0 ; i < draggableObjects.length ; i++ ) {\r
  72       \r
  73       // copy data from drag grid buffer to drop grid buffer\r
  74       \r
  75       var srcGrid = draggableObjects[i].liveGrid;\r
  76       if (srcGrid==this.liveGrid) continue;\r
  77       var srcRow  = srcGrid.buffer.bufferRow(draggableObjects[i].dragRow);\r
  78       var newRows = this.liveGrid.buffer.appendRows(1);\r
  79       for (var c=0; c < srcGrid.columns.length; c++)\r
  80         newRows[0][c]=srcGrid.buffer.getValue(srcRow,c)\r
  81       logger.value+="GridDropzone.accept: " + draggableObjects[i].htmlElement.innerHTML + " from [" + srcGrid.tableId +"] to [" + this.liveGrid.tableId +"]\n";\r
  82       \r
  83       // refresh drop grid\r
  84 \r
  85       this.liveGrid.buffer.fetch(0);\r
  86       this.liveGrid.scrollToRow(this.liveGrid.buffer.size-1); // scroll to the end\r
  87       \r
  88       // remove item from drag grid\r
  89       \r
  90       srcGrid.buffer.deleteRows(srcRow);\r
  91       srcGrid.buffer.fetch(Math.min(srcGrid.lastRowPos || 0, srcGrid.topOfLastPage()-1));\r
  92     }\r
  93   }\r
  94 \r
  95 };\r
  96 </script>
  97
  98 <link href="../demo.css" type="text/css" rel="stylesheet">\r
  99 <style type="text/css">\r
 100 p {\r
 101   font-size : 8pt;\r
 102 }\r
 103 \r
 104 div.title {\r
 105    font-family      : Arial;\r
 106    font-size        : 10px;\r
 107    background-color : #797979;\r
 108    color            : #ffffff;\r
 109    width            : 200px;\r
 110    margin           : 1px;\r
 111 }\r
 112 div.box {\r
 113    font-family   : Arial;\r
 114    font-size     : 14px;\r
 115    width         : 100px;\r
 116    height        : 40px;\r
 117    text-align    : center;\r
 118    border-bottom : 1px solid #6b6b6b;\r
 119    border-right  : 1px solid #6b6b6b;\r
 120 }\r
 121 \r
 122 div.panel {\r
 123    width    : 200px;\r
 124    height   : 80px;\r
 125    padding  : 2px;\r
 126    border   : 1px solid #5b5b5b;\r
 127 }\r
 128 \r
 129 div.explanation {\r
 130    font-family      : Arial;\r
 131    font-size        : 12px;\r
 132    width            : 600px;\r
 133    background-color : #cdd7b5;\r
 134 }\r
 135 \r
 136 div.simpleDropPanel {\r
 137    width    : 200px;\r
 138    height   : 80px;\r
 139    padding  : 2px;\r
 140    border   : 1px solid #5b5b5b;\r
 141 }\r
 142 .logBox {\r
 143   background-color : #ffffee;\r
 144   border : 1px solid #888;\r
 145   font-size : 8pt;\r
 146 }\r
 147 \r
 148 .zone {\r
 149   padding: 0px;\r
 150   width:250px;\r
 151   height:150px;\r
 152   overflow:hidden;\r
 153   margin-left:8px;\r
 154   margin-bottom:8px;\r
 155   float:left;\r
 156   position: relative;\r
 157 }\r
 158 .catHeader {\r
 159   font-family : Arial;\r
 160   font-weight : bold;\r
 161   font-size : 11px;\r
 162   color : #5b5b5b;\r
 163   margin-left : 8px;\r
 164   margin-top : 12px;\r
 165   margin-bottom: 0px;\r
 166   display : block;\r
 167 }\r
 168 .LiveGridDraggable {\r
 169   background-color : #E0DDB5;\r
 170   color            : #5b5b5b;\r
 171   border           : 1px solid #5b5b5b;\r
 172   filter           : alpha(Opacity=70);\r
 173   opacity          : 0.7;\r
 174   -moz-opacity     : 0.7;\r
 175   padding          : 1px 5px 1px 5px;\r
 176   font-size        : 11px;\r
 177 }\r
 178 div.ricoLG_outerDiv {\r
 179   border: 1px solid #888;\r
 180   background-color:#FFF;\r
 181 }\r
 182 #exampleContainer {\r
 183   float:left;\r
 184   background-color:#DDD;\r
 185 }\r
 186 </style>\r
 187 </head>
 188
 189
 190 <body>
 191
 192 <h1>Rico Drag &amp; Drop Examples</h1>
 193 \r
 194 <p>Base Library: \r
 195 <script type='text/javascript'>\r
 196 document.write(Rico.Lib+' '+Rico.LibVersion);\r
 197 </script>\r
 198 </p>\r
 199 \r
 200 \r
 201 <div id="exampleContainer">\r
 202 \r
 203 <p>&nbsp;Drag names from grid to grid</p>\r
 204 \r
 205 <div>\r
 206 <div id="gridzone1" class='zone'>\r
 207   <p class="catHeader">Grid 1: <span id="grid1_bookmark">&nbsp;</span></p>\r
 208   <div id="grid1"></div>\r
 209 </div>\r
 210 \r
 211 <div id="gridzone2" class='zone'>\r
 212   <p class="catHeader">Grid 2: <span id="grid2_bookmark">&nbsp;</span></p>\r
 213   <div id="grid2"></div>\r
 214 </div>\r
 215 </div>\r
 216 \r
 217 <div style='clear:both'>\r
 218 <div id="gridzone3" class='zone'>\r
 219   <p class="catHeader">Grid 3: <span id="grid3_bookmark">&nbsp;</span></p>\r
 220   <div id="grid3"></div>\r
 221 </div>\r
 222 \r
 223 <div id="gridzone4" class='zone'>\r
 224   <p class="catHeader">Grid 4: <span id="grid4_bookmark">&nbsp;</span></p>\r
 225   <div id="grid4"></div>\r
 226 </div>\r
 227 </div>\r
 228 \r
 229 <div style="clear:both;margin:8px;">\r
 230   <span id='loghead' class="catHeader">drag-n-drop message log:</span>\r
 231   <textarea class="logBox" id="logger" rows='6' cols='80'></textarea>\r
 232 </div>\r
 233 \r
 234 </div>\r
 235 \r
 236 \r
 237 </body>\r
 238 </html>