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