/*
DragDrop 1.1.4 (c) 2008 by J. Reijers
-- EXAMPLE --
*/
function _DragDrop() {
this.x = -1;
this.y = -1;
this.startX = 0;
this.startY = 0;
this.drops = [];
this.opacity = 50; // 0 - 100% opacity
this.revertStep = 100; // pixels per step
this.emphDropID = null;
this.initialised = false;
_DragDrop.prototype.init = function() {
if (!this.initialised) {
this.dragShell = document.getElementById("divDragDrop");
addEvent(window, "load", this.initDrops);
addEvent(document, "mousemove", this.updateDrag);
addEvent(document, "mouseup", this.doDrop);
addEvent(document.body, "selectstart", new Function("return !DragDrop.draggedElement")); // -- Prevent select when dragging in IE
this.initialised = true;
}
}
_DragDrop.prototype.initDrops = function(refreshAll) {
if (typeof refreshAll == "undefined") var refreshAll = true;
for (var X in DragDrop.drops) if (refreshAll || !DragDrop.drops[X].initialised) {
var el = document.getElementById(X);
if (el != null) {
DragDrop.tagEl(el);
DragDrop.drops[X].x = el.xPos;
DragDrop.drops[X].y = el.yPos;
DragDrop.drops[X].width = el.offsetWidth;
DragDrop.drops[X].height = el.offsetHeight;
DragDrop.drops[X].initialised = true;
}
}
}
_DragDrop.prototype.addDrag = function(dragID, dragContent) {
var el = document.getElementById(dragID);
if (el != null) {
el.dragContent = (typeof dragContent == "undefined") ? { html: "" } : dragContent;
if (!el.dragContent.html || el.dragContent.html == "") switch(el.nodeName) {
case "IMG": el.dragContent.html = "![](" + el.src + ")
" + el.title.replace(/\n(.)+/g, ""); break;
case "INPUT": el.dragContent.html = ""; break;
default: el.dragContent.html = el.innerHTML;
}
el.dragContent.id = dragID;
addEvent(el, "mousedown", DragDrop.doDrag);
addEvent(el, "dragstart", DragDrop.doDrag);
}
}
_DragDrop.prototype.addDrop = function(dropID, dropContent) {
this.drops[dropID] = (typeof dropContent == "undefined") ? { } : dropContent;
this.initDrops(false);
}
_DragDrop.prototype.doDrag = function(e) {
if (DragDrop.dragShell == null || DragDrop.draggedElement != null) return false;
var e = e ? e : window.event || window.Event;
var el = e.srcElement ? e.srcElement : e.target;
while (!el.dragContent && (el.parentNode || el.parentElement)) el = el.parentNode ? el.parentNode : el.parentElement;
DragDrop.tagEl(el);
DragDrop.draggedElement = el;
DragDrop.draggedElement.dropped = false;
DragDrop.drag = el.dragContent;
DragDrop.drag.x = el.xPos;
DragDrop.drag.y = el.yPos;
DragDrop.width = el.offsetWidth;
DragDrop.height = el.offsetHeight;
DragDrop.dragShell.innerHTML = el.dragContent.html;
DragDrop.getScrollPos();
DragDrop.startX = e.pageX ? e.pageX : e.clientX + DragDrop.scrollX;
DragDrop.startY = e.pageY ? e.pageY : e.clientY + DragDrop.scrollY;
DragDrop.x = -1;
DragDrop.y = -1;
if (DragDrop.onDragStart) DragDrop.onDragStart();
if (DragDrop.drag.onDragStart) DragDrop.drag.onDragStart();
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
e.returnValue = true;
e.cancelBubble = true;
return true;
}
_DragDrop.prototype.updateDrag = function(e) {
var e = e ? e : window.event || window.Event;
DragDrop.getScrollPos();
var X = e.pageX ? e.pageX : e.clientX + DragDrop.scrollX;
var Y = e.pageY ? e.pageY : e.clientY + DragDrop.scrollY;
if (X == DragDrop.startX && Y == DragDrop.startY) DragDrop.draggedElement = null;
if (DragDrop.draggedElement != null && !DragDrop.draggedElement.dropped) {
DragDrop.setTransparancy(true);
DragDrop.dragShell.style.left = X + 1;
DragDrop.dragShell.style.top = Y - 14;
DragDrop.dragShell.style.visibility = "visible";
DragDrop.tagEl(DragDrop.dragShell);
DragDrop.x = DragDrop.dragShell.xPos;
DragDrop.y = DragDrop.dragShell.yPos;
var dropTarget = document.getElementById(DragDrop.getDropID());
if (dropTarget == null) DragDrop.relieveDropTarget(); else DragDrop.emphasiseDropTarget(dropTarget);
if (DragDrop.onDrag) DragDrop.onDrag();
if (DragDrop.drag.onDrag) DragDrop.drag.onDrag();
}
}
_DragDrop.prototype.cancelDrag = function() {
try {
clearTimeout(DragDrop.revertTimer);
}
catch(err) {}
DragDrop.dragShell.style.visibility = "hidden";
DragDrop.setTransparancy(false);
DragDrop.x = -1;
DragDrop.y = -1;
DragDrop.width = 0;
DragDrop.height = 0;
DragDrop.draggedElement = null;
DragDrop.dragContent = null;
DragDrop.dropContent = null;
}
_DragDrop.prototype.doRevert = function(initDone) {
if (typeof initDone == "undefined") var init = true;
if (init) {
var screenWidth = screen.width ? screen.width : screen.availWidth;
var screenHeight = screen.height ? screen.height : screen.availHeight;
DragDrop.getScrollPos(DragDrop.draggedElement);
DragDrop.getScrollPos(DragDrop.dragShell);
}
var origX = parseInt(DragDrop.drag.x, 10) - parseInt(DragDrop.draggedElement ? DragDrop.draggedElement.scrollX : 0, 10);
var origY = parseInt(DragDrop.drag.y, 10) - parseInt(DragDrop.draggedElement ? DragDrop.draggedElement.scrollY : 0, 10);
if (init) {
var distX = Math.abs(DragDrop.x - origX);
var distY = Math.abs(DragDrop.y - origY);
var xIsLonger = distX > distY;
var longestDist = xIsLonger ? distX : distY;
DragDrop.revertInterval = 20 - parseInt((longestDist / screenWidth) * 15, 10);
if (xIsLonger) {
DragDrop.revertStepX = (DragDrop.revertStep > distX) ? distX : DragDrop.revertStep;
DragDrop.revertStepY = parseInt((distY / distX) * DragDrop.revertStepX, 10);
} else {
DragDrop.revertStepY = (DragDrop.revertStep > distY) ? distY : DragDrop.revertStep;
DragDrop.revertStepX = parseInt((distX / distY) * DragDrop.revertStepY, 10);
}
}
var stepX = DragDrop.revertStepX;
var stepY = DragDrop.revertStepY;
if (DragDrop.x < origX) {
DragDrop.x += stepX;
if (DragDrop.x > origX) DragDrop.x = origX;
} else if (DragDrop.x > origX) {
DragDrop.x -= stepX
if (DragDrop.x < origX) DragDrop.x = origX;
}
DragDrop.dragShell.style.left = DragDrop.x;
if (DragDrop.y < origY) {
DragDrop.y += stepY;
if (DragDrop.y > origY) DragDrop.y = origY;
} else if (DragDrop.y > origY) {
DragDrop.y -= stepY;
if (DragDrop.y < origY) DragDrop.y = origY;
}
DragDrop.dragShell.style.top = DragDrop.y;
if (DragDrop.x == origX || DragDrop.y == origY) DragDrop.cancelDrag(); else DragDrop.revertTimer = setTimeout("DragDrop.doRevert(true)", DragDrop.revertInterval);
}
_DragDrop.prototype.getDropID = function() {
if (this.width > 0 && this.x > -1) for (var X in this.drops) if (X != this.draggedElement.id && this.x + this.width >= this.drops[X].x && this.x <= this.drops[X].x + this.drops[X].width && this.y + this.height >= this.drops[X].y && this.y <= this.drops[X].y + this.drops[X].height) return X;
return "";
}
_DragDrop.prototype.doDrop = function(e) {
var e = e ? e : window.event || window.Event;
if (DragDrop.draggedElement != null) {
DragDrop.draggedElement.dropped = true;
var dropAction = false;
if (DragDrop.onDrop || DragDrop.drag.onDrop) {
DragDrop.dropID = DragDrop.getDropID();
if (DragDrop.dropID != "") {
DragDrop.drop = DragDrop.drops[DragDrop.dropID];
DragDrop.drop.id = DragDrop.dropID;
if (DragDrop.onDrop || DragDrop.drag.onDrop) {
DragDrop.dragShell.style.visibility = "hidden";
DragDrop.setTransparancy(false);
dropAction = true;
}
if (DragDrop.onDrop) DragDrop.onDrop();
if (DragDrop.drag.onDrop) DragDrop.drag.onDrop();
}
}
if (dropAction) DragDrop.cancelDrag(); else if (typeof DragDrop.drag.revert == "undefined" || DragDrop.drag.revert == true) DragDrop.doRevert();
DragDrop.relieveDropTarget();
}
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
e.returnValue = false;
e.cancelBubble = true;
return false;
}
_DragDrop.prototype.getScrollPos = function(el) {
if (typeof el == "undefined") {
this.scrollX = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
this.scrollY = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
} else {
var scrollX = 0;
var scrollY = 0;
var origEl = el;
while (el.offsetParent) {
scrollX += el.scrollLeft ? el.scrollLeft : 0;
scrollY += el.scrollTop ? el.scrollTop : 0;
el = el.offsetParent;
}
el = origEl;
el.scrollX = scrollX;
el.scrollY = scrollY;
}
}
_DragDrop.prototype.setTransparancy = function(value) {
if (this.draggedElement) {
this.draggedElement.style.filter = "alpha(opacity=" + (value ? this.opacity : 100) + ")";
this.draggedElement.style.opacity = (value ? this.opacity / 100 : 1);
this.draggedElement.style.mozOpacity = (value ? this.opacity / 100 : 1);
}
}
_DragDrop.prototype.emphasiseDropTarget = function(dropTarget) {
if (dropTarget.id != this.emphDropID) {
this.relieveDropTarget();
this.emphDropID = dropTarget.id;
this.emphDropSetting1 = dropTarget.style.filter;
this.emphDropSetting2 = dropTarget.style.opacity;
dropTarget.style.filter = "invert";
dropTarget.style.opacity = "0.5";
}
}
_DragDrop.prototype.relieveDropTarget = function() {
if (this.emphDropID != null) {
var dropTarget = document.getElementById(this.emphDropID);
dropTarget.style.filter = this.emphDropSetting1;
dropTarget.style.opacity = this.emphDropSetting2;
this.emphDropID = null;
}
}
_DragDrop.prototype.tagEl = function(el) {
if (el == null) return false;
var origEl = el;
var curX = 0, curY = 0;
while (el.offsetParent) {
curX += el.offsetLeft;
curY += el.offsetTop;
el = el.offsetParent;
}
origEl.xPos = curX;
origEl.yPos = curY;
return true;
}
}
function addEvent(o, e, f) {
o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent ? o.attachEvent("on" + e, f) : o["on" + e] = f;
}
document.write("");
DragDrop = new _DragDrop();