1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
6 <title>Rico - Drag and Drop</title>
8 <script src="LoadRicoClient.js" type="text/javascript"></script>
\r
10 <script type='text/javascript'>
\r
11 Rico.onLoad( function() {
\r
12 Rico.Corner.round('exampleContainer');
\r
13 logger=Rico.$('logger');
\r
16 // initialize all 4 grids with the same options
\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
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
29 // load data into the first grid
\r
31 buffer[0].loadRowsFromArray(names);
\r
34 // initialize the drop zones (the other 3 grids)
\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
43 var names = [ ["Holloman", "Debbie"],
\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
54 var grid_ids=['grid1','grid2','grid3','grid4']
\r
55 var CustomDraggable, logger, grid=[], buffer=[];
\r
58 function GridDropzone(grid) {
\r
59 this.initialize(grid);
\r
62 var GridDropzoneMethods = {
\r
64 initialize: function( grid ) {
\r
65 this.liveGrid = grid;
\r
66 this.htmlElement = grid.outerDiv;
\r
67 this.absoluteRect = null;
\r
70 accept: function(draggableObjects) {
\r
71 for ( var i = 0 ; i < draggableObjects.length ; i++ ) {
\r
73 // copy data from drag grid buffer to drop grid buffer
\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
83 // refresh drop grid
\r
85 this.liveGrid.buffer.fetch(0);
\r
86 this.liveGrid.scrollToRow(this.liveGrid.buffer.size-1); // scroll to the end
\r
88 // remove item from drag grid
\r
90 srcGrid.buffer.deleteRows(srcRow);
\r
91 srcGrid.buffer.fetch(Math.min(srcGrid.lastRowPos || 0, srcGrid.topOfLastPage()-1));
\r
98 <link href="../demo.css" type="text/css" rel="stylesheet">
\r
99 <style type="text/css">
\r
105 font-family : Arial;
\r
107 background-color : #797979;
\r
113 font-family : Arial;
\r
117 text-align : center;
\r
118 border-bottom : 1px solid #6b6b6b;
\r
119 border-right : 1px solid #6b6b6b;
\r
126 border : 1px solid #5b5b5b;
\r
130 font-family : Arial;
\r
133 background-color : #cdd7b5;
\r
136 div.simpleDropPanel {
\r
140 border : 1px solid #5b5b5b;
\r
143 background-color : #ffffee;
\r
144 border : 1px solid #888;
\r
156 position: relative;
\r
159 font-family : Arial;
\r
160 font-weight : bold;
\r
165 margin-bottom: 0px;
\r
168 .LiveGridDraggable {
\r
169 background-color : #E0DDB5;
\r
171 border : 1px solid #5b5b5b;
\r
172 filter : alpha(Opacity=70);
\r
174 -moz-opacity : 0.7;
\r
175 padding : 1px 5px 1px 5px;
\r
178 div.ricoLG_outerDiv {
\r
179 border: 1px solid #888;
\r
180 background-color:#FFF;
\r
182 #exampleContainer {
\r
184 background-color:#DDD;
\r
192 <h1>Rico Drag & Drop Examples</h1>
195 <script type='text/javascript'>
\r
196 document.write(Rico.Lib+' '+Rico.LibVersion);
\r
201 <div id="exampleContainer">
\r
203 <p> Drag names from grid to grid</p>
\r
206 <div id="gridzone1" class='zone'>
\r
207 <p class="catHeader">Grid 1: <span id="grid1_bookmark"> </span></p>
\r
208 <div id="grid1"></div>
\r
211 <div id="gridzone2" class='zone'>
\r
212 <p class="catHeader">Grid 2: <span id="grid2_bookmark"> </span></p>
\r
213 <div id="grid2"></div>
\r
217 <div style='clear:both'>
\r
218 <div id="gridzone3" class='zone'>
\r
219 <p class="catHeader">Grid 3: <span id="grid3_bookmark"> </span></p>
\r
220 <div id="grid3"></div>
\r
223 <div id="gridzone4" class='zone'>
\r
224 <p class="catHeader">Grid 4: <span id="grid4_bookmark"> </span></p>
\r
225 <div id="grid4"></div>
\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