Hi Daniel,
Lucho (who started this thread) posted this sample in another thread at:
http://www.activewidgets.com/javascript.forum.11225.46/this-example-shows-how-to.html
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This is a drag and drop example between 2 grids.<br>
<b>Click and drag a cell to move a row from the left grid to the right grid</b>.
<hr> <BR><BR>
<style>
#myGrid { width: 300px; height:150px; margin: 0px; padding: 0px}
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-0 {color: red;}
#myGrid .aw-mouseover-row {background: lightblue}
#myGrid .aw-mouseover-row .aw-column-0 {background: lightblue}
#myGrid {-moz-user-select: none}
#myTarget { width: 300px; height:150px; margin: 0px; padding: 0px}
#myTarget .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myTarget .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myTarget .aw-alternate-even {background: #E7E7D6;}
#myTarget .aw-alternate-odd {background: #F7F3E7;}
#myTarget .aw-rows-selected {background: #316ac5;}
#myTarget .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myTarget .aw-rows-selected .aw-column-0 {color: red;}
#myTarget .aw-mouseover-row {background: lightblue}
#myTarget .aw-mouseover-row .aw-column-0 {background: lightblue}
#myTarget {-moz-user-select: none}
</style>
<div id="englob" onmousemove="dragRowMouseMove(event)" >
<script>
var HeaderText = ["Number","Description"];
var CellText = [
["1","Description 1"],
["2","Description 2"],
["3","Description 3"],
["4","Description 4"],
["5","Description 5"],
["6","Description 6"],
["7","Description 7"],
["8","Description 8"],
["9","Description 9"],
["10","Description 10"],
["11","Description 11"],
["12","Description 12"],
["13","Description 13"],
["14","Description 14"],
["15","Description 15"]
];
var TargetCellText = [[]];
var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setHeaderText(HeaderText);
obj.setCellText(CellText);
obj.setColumnCount(2);
obj.setRowCount(15);
obj.setVirtualMode(false);
obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-row");
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
var target = new AW.UI.Grid;
target.setId("myTarget");
target.setHeaderText(HeaderText);
target.setCellText(TargetCellText);
target.setColumnCount(2);
target.setRowCount(1);
target.setVirtualMode(false);
target.onHeaderClicked = function(event,index){return 'disabled'};
target.setSelectionMode("single-row");
target.setSelectorVisible(true);
target.setSelectorWidth(25);
function DeleteSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice(insertindex,1);
obj.setRowCount(obj.getRowCount()-1);
obj.refresh();
}
function AddNewRowBelowSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice((insertindex*1)+1,0,["new","new"]);
obj.setRowCount(obj.getRowCount()+1);
obj.refresh();
}
var startrow;
function dragstart(e, column, row){
startrow=row;
var FeedbackRow = document.getElementById('FeedbackRow');
FeedbackRow.style.display="";
dragRowMouseMove(e);
var content = '<table width="300"><tr><td>'+CellText[row][0]+'</td><td>'+CellText[row][1]+'</td></tr></table>';
FeedbackRow.innerHTML=content;
}
function dragstop(){
startrow=undefined;
var FeedbackRow = document.getElementById('FeedbackRow');
FeedbackRow.style.display="none";
}
var dragRowMouseMove = function(event) {
var FeedbackRow = document.getElementById('FeedbackRow');
if (FeedbackRow.style.display!="none")
{
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
FeedbackRow.style.top=y-18;
FeedbackRow.style.left=x-100;
document.getElementById('debug').innerHTML="x="+x +" y="+y;
}
}
obj.onCellMouseDown = function(event, column, row){ dragstart(event, column, row) };
obj.onCellMouseUp = function(event, column, row){ if (startrow) dragstop() };
obj.setEvent("onmousemove", dragRowMouseMove);
var yDropMin=0;
var yDropMax=0;
var xDropMin=0;
var xDropMax=0;
var rowHeight=0;
target.onCellMouseUpForward = function(event) {
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
var gridHeight=150;
var gridWidth=300;
var selectorWidth=0;
if (target.getSelectorVisible())
{
selectorWidth=target.getSelectorWidth();
}
if (yDropMin==0)
{
var el = target.getCellTemplate(0, 0).element();
rowHeight =el.offsetHeight;
yDropMin = AW.getTop(el);
yDropMax = yDropMin - target.getHeaderHeight()+gridHeight;
xDropMin = AW.getLeft(el);
xDropMax = xDropMin + gridWidth-selectorWidth;
}
if (x>xDropMin && x<xDropMax && y>yDropMin && y<yDropMax)
{
target.onCellMouseUp(event,0,Math.round((y-yDropMin+target.getScrollTop())/rowHeight));
}
}
target.onCellMouseUp = function(event, column, row) {
if (startrow) {
if (TargetCellText[0][0]==undefined)
{
TargetCellText[0][0]=CellText[startrow][0];
TargetCellText[0][1]=CellText[startrow][1];
}
else
{
var insertindex=row;
if (insertindex>target.getRowCount()-1)
{
insertindex=target.getRowCount();
}
TargetCellText.splice((insertindex*1),0,CellText[startrow]);
target.setRowCount(target.getRowCount()+1);
}
target.refresh();
dragstop();
}
};
document.write(obj);
document.write(target);
document.onmouseup = function () {
if (startrow) { dragstop() ; }
}
</script>
<br>
<button onclick="AddNewRowBelowSelectedRow()">Add New Row Below Selected Row</button>
<button onclick="DeleteSelectedRow()">Delete Selected Row</button>
<hr>
This has been tested using AW 2.0 (standard/final) and IE and Firefox 1.0. It has some limitations
<ul>
<li>Only works on ARRAY based grid.
<li>Array is manipulated directly using splice (instead of addRow / deleteRow).
<li>Sorting is not supported so it is disabled
</ul>
</div>
<div id="FeedbackRow" style="position:absolute;display:none" onmouseup="target.onCellMouseUpForward(event)">
</div>
<div id="debug">
</div>
<div id="debug2">
</div>
</body>
</script>
</html>