function getBrowserIsOpera() {
var BROWSER_IS_OPERA = new Number(0);
UserAgent = navigator.userAgent
AgentName = UserAgent.substring(25,30)
if (AgentName == "Opera") {
return true;
} else {
return false;
}
}
function getBrowserIsIE() {
var BROWSER_IS_OPERA = new Number(0);
UserAgent = navigator.userAgent
AgentName = UserAgent.substring(25,30)
if (navigator.appVersion.indexOf("MSIE")!=-1) {
return true;
} else {
return false;
}
}
function recursiveGetOffsetTop(FIELD) {
theOffsetTop = new Number(FIELD.offsetTop);
if (FIELD.offsetParent != null) {
theOffsetTop = theOffsetTop + recursiveGetOffsetTop(FIELD.offsetParent);
}
return theOffsetTop;
}
function recursiveGetOffsetLeft(FIELD) {
theOffsetLeft = new Number(FIELD.offsetLeft);
if (FIELD.offsetParent != null) {
theOffsetLeft = theOffsetLeft + recursiveGetOffsetLeft(FIELD.offsetParent);
}
return theOffsetLeft;
}
function getXOffset(e) {
if (getBrowserIsIE()) {
return e.clientX - 2;
} else {
return e.clientX;
}
}
function getYOffset(e) {
if (getBrowserIsIE()) {
return e.clientY + 2;
} else {
return e.clientY;
}
}
function openPopupWindow(path, name, args) {
window.open(path, name, args);
}
function getElement(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
if ( this.obj ) { this.style = document.getElementById(name).style; }
} else if (document.all) {
this.obj = document.all[name];
if ( this.obj ) { this.style = document.all[name].style; }
} else if (document.layers) {
this.obj = document.layers[name];
if ( this.obj ) { this.style = document.layers[name]; }
}
}
function getPopupElement(name) {
if (document.getElementById)
{ this.obj = opener.document.getElementById(name);
this.style = opener.document.getElementById(name).style;
} else if (document.all) {
this.obj = opener.document.all[name];
this.style = opener.document.all[name].style;
} else if (document.layers) {
this.obj = opener.document.layers[name];
this.style = opener.document.layers[name];
}
}
// Table Cell Column Dragging
var intervalID = 0;
var divObject = null;
function afterDrag(element) {
/*
Override this method in the html page by
defining it after the call to the .js page.
This function is run when you drop the div
in a new location after dragging it.
*/
}
function setDragStyle(divObject) {
/*
Override this method in the html page by
defining it after the call to the .js page.
This function determines the look of the div
you are dragging.
*/
divObject.display = "none";
divObject.position = "absolute";
divObject.cursor = "move";
divObject.backgroundColor = "#FFFFFF";
divObject.paddingBottom = "0px";
divObject.border = "2px solid #000000";
}
function dragStyle() {
if(!divObject) {
divObject = document.createElement("DIV");
setDragStyle(divObject.style);
document.body.appendChild(divObject);
}
return divObject;
}
function getClickedDragElement(element) {
/*
This is used to get the div element which is in the column.
From this we get the left and top of the clicked element
which then allows us set the div element you drag across the
screen to start at the same position as the clicked div element.
*/
var tempElement = element;
while (tempElement != null) {
if (tempElement.nodeName == "DIV" && typeof(tempElement.id) != "undefined") {
return tempElement;
} else {
tempElement = tempElement.parentNode;
}
}
}
function hideDragElement() {
dragStyle().style.display = "none"
}
function hideParentDragElement(element) {
element.parentNode.style.display = "none";
element.parentNode.style.display = "";
}
function setDragFunctionInterval(element, time, counter) {
var left = parseInt(dragStyle().style.left);
var top = parseInt(dragStyle().style.top);
var leftTemp = (left - recursiveGetOffsetLeft(element)) / counter;
var topTemp = (top - recursiveGetOffsetTop(element)) / counter;
return setInterval(function() {
if(counter < 1) {
clearInterval(intervalID);
hideDragElement();
elementBeingDragged = false;
return;
}
counter--;
left -= leftTemp;
top -= topTemp;
dragStyle().style.left = parseInt(left) + "px";
dragStyle().style.top = parseInt(top) + "px";
}, time / counter)
}
var elementBeingDragged = false;
var mouseDrag = {
"obj" : null,
"init" : function(element) {
element.onmousedown = mouseDrag.start;
if(isNaN(parseInt(dragStyle().style.left))) {
dragStyle().style.left = "0px";
}
if(isNaN(parseInt(dragStyle().style.top))) {
dragStyle().style.top = "0px";
}
element.onDragStart = new Function();
element.onDragEnd = new Function();
element.onDrag = new Function();
},
"start" : function(element) {
var newElement = mouseDrag.obj = this;
element = mouseDrag.fixE(element);
var leftTemp = recursiveGetOffsetLeft(getClickedDragElement(mouseDrag.obj));
var topTemp = recursiveGetOffsetTop(getClickedDragElement(mouseDrag.obj));
newElement.onDragStart(leftTemp, topTemp, element.clientX, element.clientY);
newElement.lastMouseX = element.clientX;
newElement.lastMouseY = element.clientY;
document.onmousemove = mouseDrag.drag;
document.onmouseup = mouseDrag.end;
dragStyle().style.left = leftTemp + "px";
dragStyle().style.top = topTemp + "px";
return false;
},
"drag" : function(element) {
element = mouseDrag.fixE(element);
var newElement = mouseDrag.obj;
var tempY = element.clientY;
var tempX = element.clientX;
var tempTop = parseInt(divObject.style.top);
var tempLeft = parseInt(divObject.style.left);
var newLeft, h;
newLeft = tempLeft + tempX - newElement.lastMouseX;
newTop = tempTop + tempY - newElement.lastMouseY;
dragStyle().style.left = newLeft + "px";
dragStyle().style.top = newTop + "px";
newElement.lastMouseX = tempX;
newElement.lastMouseY = tempY;
newElement.onDrag(newLeft, newTop, element.clientX, element.clientY);
return false;
},
"end" : function() {
document.onmousemove = null;
document.onmouseup = null;
mouseDrag.obj.onDragEnd(parseInt(dragStyle().style.left), parseInt(dragStyle().style.top));
afterDrag(mouseDrag.obj);
mouseDrag.obj = null;
},
"fixE" : function(element) {
if(typeof(element) == "undefined") {
element = window.event;
}
if(typeof(element.layerX) == "undefined") {
element.layerX = element.offsetX;
}
if(typeof(element.layerY) == "undefined") {
element.layerY = element.offsetY;
}
return element;
},
"kill" : function(element) {
element.onmousedown = null;
element.onDragStart = null;
element.onDragEnd = null;
element.onDrag = null;
}
}
function initializeCellColumns(columnNames) {
/*
HTML table must be set up as this:
This td is a column and needs to have an id specified.
This id and any other column names get passed into the
initializeCellColumns function (this function) as an array.
This div is an item which can be dragged in this table into
one of the existing columns.
|
This table cell is what you click onto to start dragging
the div (item_1). The id of this table cell must be the
id of the div (item_1) with _drag appended to it.
Anything can be contained in the td.
1
|
This is where the content of the div needs to go, the part
which drags but can't be clicked on to start the dragging.
1
|
Closes the columns table.
You can have multiple columns by repeating
with a different name.
You can have multiple items in any of the columns by repeating
with a different name.
If you intend to automatically make the columns drag upon page
load you must call initializeCellColumns function (this function)
at the bottom of the page and pass in an array of the column ids.
NOTE: When I say at the bottom of the page I mean it. If you
don't IE will say this:
"Internet Explorer cannot open the Internet site http://xxx/xxx.
Operation aborted"
The best place to call this is between the | and