11:25:00 PM
Apply Drag'n'Drop on your Table Structure (Demo)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.opacity50 { /* 25% opaque */
opacity:0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter:alpha(opacity=50);
zoom:1;
border-style: dashed ;
border-color :#dce9fd ;
}
.opacity5{ /* 25% opaque */
opacity:0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
filter:alpha(opacity=30);
zoom:1;
outline-style :dashed ;
border-style: dashed ;
border-color :#dce9fd ;
}
</style></head>
<body>
<table border = 1 Width="100%" valign="top" Cellspacing=0 Cellpadding=0>
<tr><td width="50%" valign="top"><table Width="100%" ID="LeftTable" border=1>
<TBody id="LeftItems">
<tr id = "r1" >
<td id = "td1">
<table><tr><td>
<p id="intro">element1</p>
</td></tr></table>
</td></tr>
<tr id = "r2">
<td id = "td2">
<p id="intro2">element2</p>
</td></tr>
<tr id = "r3">
<td id = "td3">
<p id="P1">element3</p>
</td></tr>
</tbody>
</table>
</td><td width="50%" valign="top">
<table Width="100%" ID="RightTable" >
<TBody id="RightItems">
<tr id = "rr1">
<td id = "rtd1">
<p id="rintro">element4</p>
</td></tr>
<tr id = "rr2">
<td id = "rtd2">
<p id="rintro2">element5</p>
</td></tr>
<tr id = "rr3">
<td id = "rtd3">
<p id="P2">element6</p>
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
// ===================================================================
// Author: Rohit <rohitsuri84@gmail.com>
// ===================================================================
/** Keep hold of the current table being dragged */
var currenttable = null;
/** Capture the onmousemove so that we can see if a row from the current
* table if any is being dragged.
* @param ev the event (for Firefox and Safari, otherwise we use window.event for IE)
*/
var table = document.getElementById('LeftTable');
var tableDnD = new TableDnD();
tableDnD.init(table);
var table1 = document.getElementById('RightTable');
var tableDnD = new TableDnD();
tableDnD.init(table1);
var xcord;
var ycord;
var currentobjectoffsetx;
var currentobjectoffsety;
var targetTable;
var firsttime, tr;
var currentRow, movingDown, move = true;
var innerrepeat = true;
var lastright = false;
var lastleft = false;
//Dragging Effect
function moveImage(e) {
Consult me at rohitsuri84@gmail.com for this
}
document.onmousemove = function(ev) {
if (currenttable && currenttable.dragObject) {
ev = ev || window.event;
var mousePos = currenttable.mouseCoords(ev);
var y = mousePos.y - currenttable.mouseOffset.y;
var x = mousePos.x - currenttable.mouseOffset.x;
// moveImage();
if (y != currenttable.oldY) {
// work out if we're going up or down...
movingDown = y > currenttable.oldY;
// update the old value
currenttable.oldY = y;
// update the style to show we're dragging
// currenttable.dragObject.style.borderColor = "#dce9fd";
// currenttable.dragObject.className = "drag";
// if (currenttable.dragObject.style.MozOpacity)
// { currenttable.dragObject.style.MozOpacity = 0.1; }
// else {
// if (currenttable.dragObject.filters) {
// //currenttable.dragObject.filter.alpha.opacity = 10;
// }
// }
// currenttable.dragObject.cells[0].className = "opacity50";
// If we're over a row then move the dragged row to there so that the user sees the
// effect dynamically
// currenttable.dragObject.cells[0].style.borderColor = "#dce9fd";
tr = currenttable.dragObject.cloneNode(true);
// tr.setAttribute("style.backgroundColor", "yellow");
tr.setAttribute("id", "clone_tr");
tr.setAttribute("class", "opacity5");
if (move == true) {
var tr1 = currenttable.dragObject.cloneNode(true);
tr.setAttribute("style.backgroundColor", "yellow");
tr1.setAttribute("id", "clone_tr1");
document.getElementById('RightTable').tBodies[0].appendChild(tr1);
document.getElementById("clone_tr1").style.position = "absolute"
// if (currenttable.table.id == "RightTable") {
// currentobjectoffsetx = currenttable.dragObject.offsetWidth;
// }
document.getElementById("clone_tr1").style.Left = currentobjectoffsetx;
document.getElementById("clone_tr1").style.top = currentobjectoffsety;
move = false;
} moveImage();
// tr.innerHTML = "";
// tr.style.width = currenttable.dragObject.offsetWidth;
// tr.style.height = currenttable.dragObject.offsetHeight;
// tr.style.border = '1';
tr.className = "opacity50";
tr.border=1;
if (tr.cells[0]) {
tr.cells[0].className = "opacity50";
tr.cells[0].border=1;
}
if ((tr) && (firsttime == false) && (innerrepeat == true)) {
var d = document.getElementById("clone_tr").parentNode.parentNode;
var rd = document.getElementById("clone_tr");
// alert(d.id + "tr" + rd.rowIndex);
d.deleteRow(rd.rowIndex);
innerrepeat = false;
}
currentRow = currenttable.findDropTargetRow(y, x);
if (currentRow) {
targetTable = currentRow.parentNode.parentNode;
}
if (currentRow && (currenttable.table.id == targetTable.id) && (currentRow != currenttable.dragObject)) {
if (movingDown && tr != currentRow && (currentRow.nextSibling != currenttable.dragObject)) {
currenttable.dragObject.parentNode.insertBefore(tr, currentRow.nextSibling);
firsttime = false;
innerrepeat = true;
}
else if (!movingDown && tr != currentRow && (currentRow != currenttable.dragObject.nextSibling)) {
// alert(tr.id + " tr " + currentRow.id);
currenttable.dragObject.parentNode.insertBefore(tr, currentRow);
firsttime = false;
innerrepeat = true;
}
}
if (currentRow && (currenttable.table.id != targetTable.id) && (currentRow != currenttable.dragObject)) {
if (movingDown && tr != currentRow && (currentRow.nextSibling != currenttable.dragObject)) {
currentRow.parentNode.insertBefore(tr, currentRow.nextSibling);
firsttime = false;
innerrepeat = true;
}
else if (!movingDown && tr != currentRow && (currentRow != currenttable.dragObject.nextSibling)) {
currentRow.parentNode.insertBefore(tr, currentRow);
firsttime = false;
innerrepeat = true;
}
}
}
return false;
}
}
// Similarly for the mouseup
document.onmouseup = function(ev) {
if (currenttable && currenttable.dragObject) {
var droppedRow = currenttable.dragObject;
if (document.getElementById("clone_tr")) {
var d = document.getElementById("clone_tr").parentNode.parentNode;
var rd = document.getElementById("clone_tr");
// alert(d.id + "tr" + rd.rowIndex);
d.deleteRow(rd.rowIndex);
}
if (lastright == true || lastleft == true) {
if (lastright == true) {
document.getElementById('RightTable').tBodies[0].appendChild(currenttable.dragObject);
lastright = false;
}
if (lastleft == true) {
document.getElementById('LeftTable').tBodies[0].appendChild(currenttable.dragObject);
lastleft = false;
}
}
else {
if (!currentRow) {
currentRow = currenttable.dragObject;
targetTable = currentRow.parentNode.parentNode;
}
if (!movingDown) {
if (currenttable.table.id == targetTable.id) {
currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow);
}
else {
currentRow.parentNode.insertBefore(currenttable.dragObject, currentRow);
}
}
else {
if (currenttable.table.id == targetTable.id) {
currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
}
else {
currentRow.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
}
}
}
if (document.getElementById("clone_tr1")) {
var d = document.getElementById("clone_tr1").parentNode.parentNode;
var rd = document.getElementById("clone_tr1");
// alert(d.id + "tr" + rd.rowIndex);
d.deleteRow(rd.rowIndex);
}
// If we have a dragObject, then we need to release it,
// The row will already have been moved to the right place so we just reset stuff
// droppedRow.style.backgroundColor = 'transparent';
droppedRow.cells[0].className = "IslandBody";
// droppedRow.style.backgroundColor = 'transparent';
document.getElementById(currenttable.dragObject.id).style.position = "";
// document.getElementById(currenttable.dragObject.id).style.left = "";
// document.getElementById(currenttable.dragObject.id).style.top = "";
currentRow = null;
currenttable.dragObject = null;
// And then call the onDrop method in case anyone wants to do any post processing
currenttable.onDrop(currenttable.table, droppedRow);
currenttable = null; // let go of the table too
targetTable = null;
table = document.getElementById('LeftTable');
var tableDnD = new TableDnD();
tableDnD.init(table);
table1 = document.getElementById('RightTable');
var tableDnD = new TableDnD();
tableDnD.init(table1);
firsttime = true;
}
}
/** get the source element from an event in a way that works for IE and Firefox and Safari
* @param evt the source event for Firefox (but not IE--IE uses window.event) */
function getEventSource(evt) {
if (window.event) {
evt = window.event;
// For IE
return evt.srcElement;
}
else {
return evt.target; // For Firefox
}
}
/**
* Encapsulate table Drag and Drop in a class. We'll have this as a Singleton
* so we don't get scoping problems.
*/
function TableDnD() {
/** Keep hold of the current drag object if any */
this.dragObject = null;
/** The current mouse offset */
this.mouseOffset = null;
/** The current table */
this.table = null;
/** Remember the old value of Y so that we don't do too much processing */
this.oldY = 0;
/** Initialise the drag and drop by capturing mouse move events */
this.init = function(table) {
this.table = table;
var rows = table.tBodies[0].rows; //getElementsByTagName("tr")
for (var i = 0; i < rows.length; i++) {
// added to ignore rows that I've added the NoDnD attribute to (Category and Header rows)
var nodrag = rows[i].getAttribute("NoDrag")
if (nodrag == null || nodrag == "undefined") { //There is no NoDnD attribute on rows I want to drag
this.makeDraggable(rows[i]);
}
}
}
/** This function is called when you drop a row, so redefine it in your code
to do whatever you want, for example use Ajax to update the server */
this.onDrop = function(table, droppedRow) {
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src', 'pageCustomizerTools.js');
scriptElem.setAttribute('type', 'text/javascript');
GetCellData();
}
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
this.getPosition = function(e) {
var left = 0;
var top = 0;
/** Safari fix -- thanks to Luis Chato for this! */
if (e.offsetHeight == 0) {
/** Safari 2 doesn't correctly grab the offsetTop of a table row
note that firefox will return a text node as a first child, so designing a more thorough
solution may need to take that into account, for now this seems to work in firefox, safari, ie */
e = e.firstChild;
// a table cell
}
while (e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return { x: left, y: top };
}
/** Get the mouse coordinates from the event (allowing for browser differences) */
this.mouseCoords = function(ev) {
if (ev.pageX || ev.pageY) {
return { x: ev.pageX, y: ev.pageY };
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
/** Given a target element and a mouse event, get the mouse offset from that element.
To do this we need the element's position and the mouse position */
this.getMouseOffset = function(target, ev) {
ev = ev || window.event;
var docPos = this.getPosition(target);
var mousePos = this.mouseCoords(ev);
return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
}
/** Take an item and add an onmousedown method so that we can make it draggable */
this.makeDraggable = function(item) {
if (!item) return;
var self = this; // Keep the context of the TableDnd inside the function
if (item.cells[0].childNodes[0].tagName == 'TABLE') {
//alert(item.cells[0].childNodes[0].rows[0].cells[0].id);
item.cells[0].childNodes[0].rows[0].cells[0].onmousedown = function(ev) {
// Need to check to see if we are an input or not, if we are an input, then
// return true to allow normal processing
var target = getEventSource(ev);
if (ev == null) { ev = window.event; }
xcord = ev.clientX;
ycord = ev.clientY;
if (target.tagName == 'INPUT' || target.tagName == 'SELECT') return true;
currenttable = self;
self.dragObject = item;
// alert(self.dragObject.id + " " + self.id + currenttable.table.id);
self.mouseOffset = self.getMouseOffset(item, ev);
currenttable.dragObject.style.position = "relative";
currentobjectoffsetx = parseInt(currenttable.dragObject.offsetLeft);
currentobjectoffsety = parseInt(currenttable.dragObject.offsetTop);
firsttime = true;
move = true;
return false;
}
}
else {
item.onmousedown = function(ev) {
// Need to check to see if we are an input or not, if we are an input, then
// return true to allow normal processing
var target = getEventSource(ev);
if (ev == null) { ev = window.event; }
xcord = ev.clientX;
ycord = ev.clientY;
if (target.tagName == 'INPUT' || target.tagName == 'SELECT') return true;
currenttable = self;
self.dragObject = this;
self.mouseOffset = self.getMouseOffset(this, ev);
currenttable.dragObject.style.position = "absolute";
currentobjectoffsetx = parseInt(currenttable.dragObject.offsetLeft);
currentobjectoffsety = parseInt(currenttable.dragObject.offsetTop);
firsttime = true;
move = true;
return false;
}
}
// item.style.cursor = "move";
}
/** We're only worried about the y position really, because we can only move rows up and down */
this.findDropTargetRow = function(y, x) {
var rows = document.getElementById('LeftTable').tBodies[0].rows;
var rowsright = document.getElementById('RightTable').tBodies[0].rows;
if (rowsright.length == 0) { //alert(tbodyY + " x " + tbodyX + " height " + tbodyHeight + tbodyWidth);
if (x > parseInt(rows[0].offsetWidth / 2)) {
lastright = true;
firsttime = false;
innerrepeat = true;
document.getElementById('RightTable').tBodies[0].appendChild(tr);
}
}
if (rows.length == 0) { //alert(tbodyY + " x " + tbodyX + " height " + tbodyHeight + tbodyWidth);
if (x < parseInt(rowsright[0].offsetWidth / 2)) {
lastleft = true;
firsttime = false;
innerrepeat = true;
document.getElementById('LeftTable').tBodies[0].appendChild(tr);
}
}
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
// added to ignore rows that I've added the NoDnD attribute to (Header rows)
var nodrop = row.getAttribute("NoDrop");
if (nodrop == null || nodrop == "undefined") { //There is no NoDnD attribute on rows I want to drag
var rowY = this.getPosition(row).y;
var rowX = this.getPosition(row).x;
var rowHeight = parseInt(row.offsetHeight) / 2;
var rowWidth = parseInt(row.offsetWidth) / 2;
if (row.offsetHeight == 0) {
rowY = this.getPosition(row.firstChild).y;
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
}
if (row.offsetWidth == 0) {
rowX = this.getPosition(row.firstChild).x;
rowWidth = parseInt(row.firstChild.offsetWidth) / 2;
}
// Because we always have to insert before, we need to offset the height a bit
if ((y > rowY - rowHeight) && (y < (rowY + rowHeight)) && (x > (rowX - rowWidth)) && (x < (rowX + rowWidth))) {
// that's the row we're over
return row;
}
}
}
for (var i = 0; i < rowsright.length; i++) {
var row = rowsright[i];
// added to ignore rows that I've added the NoDnD attribute to (Header rows)
var nodrop = row.getAttribute("NoDrop");
if (nodrop == null || nodrop == "undefined") { //There is no NoDnD attribute on rows I want to drag
var rowY = this.getPosition(row).y;
var rowX = this.getPosition(row).x;
var rowHeight = parseInt(row.offsetHeight) / 2;
var rowWidth = parseInt(row.offsetWidth) / 2;
if (row.offsetHeight == 0) {
rowY = this.getPosition(row.firstChild).y;
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
}
if (row.offsetWidth == 0) {
rowX =
this.getPosition(row.firstChild).x;
rowWidth = parseInt(row.firstChild.offsetWidth) / 2;
}
// Because we always have to insert before, we need to offset the height a bit
if ((y > rowY - rowHeight) && (y < (rowY + rowHeight)) && (x > (rowX - rowWidth)) && (x < (rowX + rowWidth))) {
// that's the row we're over
return row;
}
}
}
return null;
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.opacity50 { /* 25% opaque */
opacity:0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter:alpha(opacity=50);
zoom:1;
border-style: dashed ;
border-color :#dce9fd ;
}
.opacity5{ /* 25% opaque */
opacity:0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
filter:alpha(opacity=30);
zoom:1;
outline-style :dashed ;
border-style: dashed ;
border-color :#dce9fd ;
}
</style></head>
<body>
<table border = 1 Width="100%" valign="top" Cellspacing=0 Cellpadding=0>
<tr><td width="50%" valign="top"><table Width="100%" ID="LeftTable" border=1>
<TBody id="LeftItems">
<tr id = "r1" >
<td id = "td1">
<table><tr><td>
<p id="intro">element1</p>
</td></tr></table>
</td></tr>
<tr id = "r2">
<td id = "td2">
<p id="intro2">element2</p>
</td></tr>
<tr id = "r3">
<td id = "td3">
<p id="P1">element3</p>
</td></tr>
</tbody>
</table>
</td><td width="50%" valign="top">
<table Width="100%" ID="RightTable" >
<TBody id="RightItems">
<tr id = "rr1">
<td id = "rtd1">
<p id="rintro">element4</p>
</td></tr>
<tr id = "rr2">
<td id = "rtd2">
<p id="rintro2">element5</p>
</td></tr>
<tr id = "rr3">
<td id = "rtd3">
<p id="P2">element6</p>
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
// ===================================================================
// Author: Rohit <rohitsuri84@gmail.com>
// ===================================================================
/** Keep hold of the current table being dragged */
var currenttable = null;
/** Capture the onmousemove so that we can see if a row from the current
* table if any is being dragged.
* @param ev the event (for Firefox and Safari, otherwise we use window.event for IE)
*/
var table = document.getElementById('LeftTable');
var tableDnD = new TableDnD();
tableDnD.init(table);
var table1 = document.getElementById('RightTable');
var tableDnD = new TableDnD();
tableDnD.init(table1);
var xcord;
var ycord;
var currentobjectoffsetx;
var currentobjectoffsety;
var targetTable;
var firsttime, tr;
var currentRow, movingDown, move = true;
var innerrepeat = true;
var lastright = false;
var lastleft = false;
//Dragging Effect
function moveImage(e) {
Consult me at rohitsuri84@gmail.com for this
}
document.onmousemove = function(ev) {
if (currenttable && currenttable.dragObject) {
ev = ev || window.event;
var mousePos = currenttable.mouseCoords(ev);
var y = mousePos.y - currenttable.mouseOffset.y;
var x = mousePos.x - currenttable.mouseOffset.x;
// moveImage();
if (y != currenttable.oldY) {
// work out if we're going up or down...
movingDown = y > currenttable.oldY;
// update the old value
currenttable.oldY = y;
// update the style to show we're dragging
// currenttable.dragObject.style.borderColor = "#dce9fd";
// currenttable.dragObject.className = "drag";
// if (currenttable.dragObject.style.MozOpacity)
// { currenttable.dragObject.style.MozOpacity = 0.1; }
// else {
// if (currenttable.dragObject.filters) {
// //currenttable.dragObject.filter.alpha.opacity = 10;
// }
// }
// currenttable.dragObject.cells[0].className = "opacity50";
// If we're over a row then move the dragged row to there so that the user sees the
// effect dynamically
// currenttable.dragObject.cells[0].style.borderColor = "#dce9fd";
tr = currenttable.dragObject.cloneNode(true);
// tr.setAttribute("style.backgroundColor", "yellow");
tr.setAttribute("id", "clone_tr");
tr.setAttribute("class", "opacity5");
if (move == true) {
var tr1 = currenttable.dragObject.cloneNode(true);
tr.setAttribute("style.backgroundColor", "yellow");
tr1.setAttribute("id", "clone_tr1");
document.getElementById('RightTable').tBodies[0].appendChild(tr1);
document.getElementById("clone_tr1").style.position = "absolute"
// if (currenttable.table.id == "RightTable") {
// currentobjectoffsetx = currenttable.dragObject.offsetWidth;
// }
document.getElementById("clone_tr1").style.Left = currentobjectoffsetx;
document.getElementById("clone_tr1").style.top = currentobjectoffsety;
move = false;
} moveImage();
// tr.innerHTML = "";
// tr.style.width = currenttable.dragObject.offsetWidth;
// tr.style.height = currenttable.dragObject.offsetHeight;
// tr.style.border = '1';
tr.className = "opacity50";
tr.border=1;
if (tr.cells[0]) {
tr.cells[0].className = "opacity50";
tr.cells[0].border=1;
}
if ((tr) && (firsttime == false) && (innerrepeat == true)) {
var d = document.getElementById("clone_tr").parentNode.parentNode;
var rd = document.getElementById("clone_tr");
// alert(d.id + "tr" + rd.rowIndex);
d.deleteRow(rd.rowIndex);
innerrepeat = false;
}
currentRow = currenttable.findDropTargetRow(y, x);
if (currentRow) {
targetTable = currentRow.parentNode.parentNode;
}
if (currentRow && (currenttable.table.id == targetTable.id) && (currentRow != currenttable.dragObject)) {
if (movingDown && tr != currentRow && (currentRow.nextSibling != currenttable.dragObject)) {
currenttable.dragObject.parentNode.insertBefore(tr, currentRow.nextSibling);
firsttime = false;
innerrepeat = true;
}
else if (!movingDown && tr != currentRow && (currentRow != currenttable.dragObject.nextSibling)) {
// alert(tr.id + " tr " + currentRow.id);
currenttable.dragObject.parentNode.insertBefore(tr, currentRow);
firsttime = false;
innerrepeat = true;
}
}
if (currentRow && (currenttable.table.id != targetTable.id) && (currentRow != currenttable.dragObject)) {
if (movingDown && tr != currentRow && (currentRow.nextSibling != currenttable.dragObject)) {
currentRow.parentNode.insertBefore(tr, currentRow.nextSibling);
firsttime = false;
innerrepeat = true;
}
else if (!movingDown && tr != currentRow && (currentRow != currenttable.dragObject.nextSibling)) {
currentRow.parentNode.insertBefore(tr, currentRow);
firsttime = false;
innerrepeat = true;
}
}
}
return false;
}
}
// Similarly for the mouseup
document.onmouseup = function(ev) {
if (currenttable && currenttable.dragObject) {
var droppedRow = currenttable.dragObject;
if (document.getElementById("clone_tr")) {
var d = document.getElementById("clone_tr").parentNode.parentNode;
var rd = document.getElementById("clone_tr");
// alert(d.id + "tr" + rd.rowIndex);
d.deleteRow(rd.rowIndex);
}
if (lastright == true || lastleft == true) {
if (lastright == true) {
document.getElementById('RightTable').tBodies[0].appendChild(currenttable.dragObject);
lastright = false;
}
if (lastleft == true) {
document.getElementById('LeftTable').tBodies[0].appendChild(currenttable.dragObject);
lastleft = false;
}
}
else {
if (!currentRow) {
currentRow = currenttable.dragObject;
targetTable = currentRow.parentNode.parentNode;
}
if (!movingDown) {
if (currenttable.table.id == targetTable.id) {
currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow);
}
else {
currentRow.parentNode.insertBefore(currenttable.dragObject, currentRow);
}
}
else {
if (currenttable.table.id == targetTable.id) {
currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
}
else {
currentRow.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
}
}
}
if (document.getElementById("clone_tr1")) {
var d = document.getElementById("clone_tr1").parentNode.parentNode;
var rd = document.getElementById("clone_tr1");
// alert(d.id + "tr" + rd.rowIndex);
d.deleteRow(rd.rowIndex);
}
// If we have a dragObject, then we need to release it,
// The row will already have been moved to the right place so we just reset stuff
// droppedRow.style.backgroundColor = 'transparent';
droppedRow.cells[0].className = "IslandBody";
// droppedRow.style.backgroundColor = 'transparent';
document.getElementById(currenttable.dragObject.id).style.position = "";
// document.getElementById(currenttable.dragObject.id).style.left = "";
// document.getElementById(currenttable.dragObject.id).style.top = "";
currentRow = null;
currenttable.dragObject = null;
// And then call the onDrop method in case anyone wants to do any post processing
currenttable.onDrop(currenttable.table, droppedRow);
currenttable = null; // let go of the table too
targetTable = null;
table = document.getElementById('LeftTable');
var tableDnD = new TableDnD();
tableDnD.init(table);
table1 = document.getElementById('RightTable');
var tableDnD = new TableDnD();
tableDnD.init(table1);
firsttime = true;
}
}
/** get the source element from an event in a way that works for IE and Firefox and Safari
* @param evt the source event for Firefox (but not IE--IE uses window.event) */
function getEventSource(evt) {
if (window.event) {
evt = window.event;
// For IE
return evt.srcElement;
}
else {
return evt.target; // For Firefox
}
}
/**
* Encapsulate table Drag and Drop in a class. We'll have this as a Singleton
* so we don't get scoping problems.
*/
function TableDnD() {
/** Keep hold of the current drag object if any */
this.dragObject = null;
/** The current mouse offset */
this.mouseOffset = null;
/** The current table */
this.table = null;
/** Remember the old value of Y so that we don't do too much processing */
this.oldY = 0;
/** Initialise the drag and drop by capturing mouse move events */
this.init = function(table) {
this.table = table;
var rows = table.tBodies[0].rows; //getElementsByTagName("tr")
for (var i = 0; i < rows.length; i++) {
// added to ignore rows that I've added the NoDnD attribute to (Category and Header rows)
var nodrag = rows[i].getAttribute("NoDrag")
if (nodrag == null || nodrag == "undefined") { //There is no NoDnD attribute on rows I want to drag
this.makeDraggable(rows[i]);
}
}
}
/** This function is called when you drop a row, so redefine it in your code
to do whatever you want, for example use Ajax to update the server */
this.onDrop = function(table, droppedRow) {
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src', 'pageCustomizerTools.js');
scriptElem.setAttribute('type', 'text/javascript');
GetCellData();
}
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
this.getPosition = function(e) {
var left = 0;
var top = 0;
/** Safari fix -- thanks to Luis Chato for this! */
if (e.offsetHeight == 0) {
/** Safari 2 doesn't correctly grab the offsetTop of a table row
note that firefox will return a text node as a first child, so designing a more thorough
solution may need to take that into account, for now this seems to work in firefox, safari, ie */
e = e.firstChild;
// a table cell
}
while (e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return { x: left, y: top };
}
/** Get the mouse coordinates from the event (allowing for browser differences) */
this.mouseCoords = function(ev) {
if (ev.pageX || ev.pageY) {
return { x: ev.pageX, y: ev.pageY };
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
/** Given a target element and a mouse event, get the mouse offset from that element.
To do this we need the element's position and the mouse position */
this.getMouseOffset = function(target, ev) {
ev = ev || window.event;
var docPos = this.getPosition(target);
var mousePos = this.mouseCoords(ev);
return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
}
/** Take an item and add an onmousedown method so that we can make it draggable */
this.makeDraggable = function(item) {
if (!item) return;
var self = this; // Keep the context of the TableDnd inside the function
if (item.cells[0].childNodes[0].tagName == 'TABLE') {
//alert(item.cells[0].childNodes[0].rows[0].cells[0].id);
item.cells[0].childNodes[0].rows[0].cells[0].onmousedown = function(ev) {
// Need to check to see if we are an input or not, if we are an input, then
// return true to allow normal processing
var target = getEventSource(ev);
if (ev == null) { ev = window.event; }
xcord = ev.clientX;
ycord = ev.clientY;
if (target.tagName == 'INPUT' || target.tagName == 'SELECT') return true;
currenttable = self;
self.dragObject = item;
// alert(self.dragObject.id + " " + self.id + currenttable.table.id);
self.mouseOffset = self.getMouseOffset(item, ev);
currenttable.dragObject.style.position = "relative";
currentobjectoffsetx = parseInt(currenttable.dragObject.offsetLeft);
currentobjectoffsety = parseInt(currenttable.dragObject.offsetTop);
firsttime = true;
move = true;
return false;
}
}
else {
item.onmousedown = function(ev) {
// Need to check to see if we are an input or not, if we are an input, then
// return true to allow normal processing
var target = getEventSource(ev);
if (ev == null) { ev = window.event; }
xcord = ev.clientX;
ycord = ev.clientY;
if (target.tagName == 'INPUT' || target.tagName == 'SELECT') return true;
currenttable = self;
self.dragObject = this;
self.mouseOffset = self.getMouseOffset(this, ev);
currenttable.dragObject.style.position = "absolute";
currentobjectoffsetx = parseInt(currenttable.dragObject.offsetLeft);
currentobjectoffsety = parseInt(currenttable.dragObject.offsetTop);
firsttime = true;
move = true;
return false;
}
}
// item.style.cursor = "move";
}
/** We're only worried about the y position really, because we can only move rows up and down */
this.findDropTargetRow = function(y, x) {
var rows = document.getElementById('LeftTable').tBodies[0].rows;
var rowsright = document.getElementById('RightTable').tBodies[0].rows;
if (rowsright.length == 0) { //alert(tbodyY + " x " + tbodyX + " height " + tbodyHeight + tbodyWidth);
if (x > parseInt(rows[0].offsetWidth / 2)) {
lastright = true;
firsttime = false;
innerrepeat = true;
document.getElementById('RightTable').tBodies[0].appendChild(tr);
}
}
if (rows.length == 0) { //alert(tbodyY + " x " + tbodyX + " height " + tbodyHeight + tbodyWidth);
if (x < parseInt(rowsright[0].offsetWidth / 2)) {
lastleft = true;
firsttime = false;
innerrepeat = true;
document.getElementById('LeftTable').tBodies[0].appendChild(tr);
}
}
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
// added to ignore rows that I've added the NoDnD attribute to (Header rows)
var nodrop = row.getAttribute("NoDrop");
if (nodrop == null || nodrop == "undefined") { //There is no NoDnD attribute on rows I want to drag
var rowY = this.getPosition(row).y;
var rowX = this.getPosition(row).x;
var rowHeight = parseInt(row.offsetHeight) / 2;
var rowWidth = parseInt(row.offsetWidth) / 2;
if (row.offsetHeight == 0) {
rowY = this.getPosition(row.firstChild).y;
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
}
if (row.offsetWidth == 0) {
rowX = this.getPosition(row.firstChild).x;
rowWidth = parseInt(row.firstChild.offsetWidth) / 2;
}
// Because we always have to insert before, we need to offset the height a bit
if ((y > rowY - rowHeight) && (y < (rowY + rowHeight)) && (x > (rowX - rowWidth)) && (x < (rowX + rowWidth))) {
// that's the row we're over
return row;
}
}
}
for (var i = 0; i < rowsright.length; i++) {
var row = rowsright[i];
// added to ignore rows that I've added the NoDnD attribute to (Header rows)
var nodrop = row.getAttribute("NoDrop");
if (nodrop == null || nodrop == "undefined") { //There is no NoDnD attribute on rows I want to drag
var rowY = this.getPosition(row).y;
var rowX = this.getPosition(row).x;
var rowHeight = parseInt(row.offsetHeight) / 2;
var rowWidth = parseInt(row.offsetWidth) / 2;
if (row.offsetHeight == 0) {
rowY = this.getPosition(row.firstChild).y;
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
}
if (row.offsetWidth == 0) {
rowX =
this.getPosition(row.firstChild).x;
rowWidth = parseInt(row.firstChild.offsetWidth) / 2;
}
// Because we always have to insert before, we need to offset the height a bit
if ((y > rowY - rowHeight) && (y < (rowY + rowHeight)) && (x > (rowX - rowWidth)) && (x < (rowX + rowWidth))) {
// that's the row we're over
return row;
}
}
}
return null;
}
}
</script>
very nice, Can u please type this in hindi??
ReplyDelete