lib_drag.js

/**
* Javascript Drag&Drop - Modified for ownCloud
*
* @author Robin Appelman
* @copyright 2010 Robin Appelman icewind1991@gmail.com
* 
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
* License as published by the Free Software Foundation; either 
* version 3 of the License, or any later version.
* 
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*  
* You should have received a copy of the GNU Lesser General Public 
* License along with this library.  If not, see <http://www.gnu.org/licenses/>.
* 
*/

position=function(x,y){
	if(x)this.x=x;
	if(y)this.y=y;
	return this;
}
position.prototype={
	x:0,
	y:0,
	add:function(pos2){
		return new position(this.x+pos2.x,this.y+pos2.y);
	},
	substract:function(pos2){
		return new position(this.x-pos2.x,this.y-pos2.y);
	},toString:function(){
		return 'x:'+this.x+',y:'+this.y;
	},inside:function(pos2){
		return Math.abs(this.x)<Math.abs(pos2.x) && Math.abs(this.y)<Math.abs(pos2.y) && Math.sign(this.x)==Math.sign(pos2.x) && Math.sign(this.y)==Math.sign(pos2.y);
	},outside:function(pos2){
		return !this.inside(pos2);
	}
}

Node.prototype.drag=new Object
/**
 * is the node dragable
 */
Node.prototype.drag.dragable=false;
/**
 * Are we currently dragging the node
 */
Node.prototype.drag.active=false;
/**
 * Create a clone to drag around
 */
Node.prototype.drag.clone=true;
/**
 * The node we (visually drag around)
 */
Node.prototype.drag.node=false;
/**
 * can we drop nodes on this
 */
Node.prototype.drag.isDropTarget=false;
/**
 * our current drop target
 */
Node.prototype.drag.dropTarget=null;
/**
 * can we drop this node now
 */
Node.prototype.drag.dropable=false;
/**
 * function called when we are being dropped on a node
 * @return bool
 */
Node.prototype.drag.onDrop=function(node){};
/**
 * function called when an node is dropped on us
 * @param Node node
 * @return bool
 */
Node.prototype.drag.onDropOn=function(node){};
/**
 * where did we start the drag
 */
Node.prototype.drag.startPosition=new position();
/**
 * where are we now
 */
Node.prototype.drag.position=new position();
/**
 * how big are we
 */
Node.prototype.drag.size=new position();
/**
 * where is the mouse
 */
Node.prototype.drag.mousePosition=new position();
/**
 * where is the mouse relative to our node
 */
Node.prototype.drag.mouseOffset=new position();

document.drag=new Object();
/**
 * is there currently something dragged
 */
document.drag.active=false;
/**
 * what is currently being dragged
 */
document.drag.node=null;
document.drag.dropTargets=Array();
/**
 * start the dragging. (onmousedown)
 * @param Event event
 */
Node.prototype.drag.start=function(event){
	if(!event)var event=window.event;
	if(!this.drag.active && this.drag.dragable){
		document.drag.active=true;
		document.drag.node=this;
		this.drag.active=true;
		this.drag.position=this.getPosition();
		this.drag.startPosition=this.getPosition();
		this.drag.mousePosition=getMousePosition(event);
		this.drag.mouseOffset=this.drag.mousePosition.substract(this.drag.position);
	}
}

/**
 * update the dragging. (onmousemove)
 * @param Event event
 */
Node.prototype.drag.update=function(event){
	if(!event)var event=window.event;
	if(this.drag.active && this.drag.dragable){
		this.drag.mousePosition=getMousePosition(event);
		this.drag.position=this.drag.mousePosition.substract(this.drag.mouseOffset);
		if(this.drag.clone && !this.drag.node){
			this.drag.node=this.cloneNode(true);
			this.drag.node.className='dragClone';
			if(this.drag.node.hasAttribute('id')){
				this.drag.node.setAttribute('id',this.drag.node.getAttribute('id')+'_dragClone');
			}
			document.getElementsByTagName('body').item(0).appendChild(this.drag.node);
		}else if(!this.drag.node){
			this.drag.node=this;
			this.drag.node.style.position='absolute';
		}
		this.drag.node.style.left=this.drag.position.x+'px';
		this.drag.node.style.top=this.drag.position.y+'px';
	}
	return true;
}

/**
 * stop the dragging/drop. (onmouseup)
 * @param Event event
 * @return bool
 */
Node.prototype.drag.stop=function(event){
	if(!event)var event=window.event;
	if(this.drag.active && this.drag.dragable){
		this.drag.active=false;
		this.drag.mousePosition=getMousePosition(event);
		this.drag.position=this.drag.mousePosition.substract(this.drag.mouseOffset);
		if(this.drag.node){
			this.drag.node.style.left=this.drag.position.x;
			this.drag.node.style.top=this.drag.position.y;
		}
		var target;
		this.drag.dropTarget=null;
		this.drag.dropable=false;
		for(var i=0;i<document.drag.dropTargets.length;i++){
			target=document.drag.dropTargets[i];
			target.drag.checkDropTarget.call(target,event);
		}
		if(this.drag.dropable && this.drag.dropTarget){
			if(this.drag.onDrop){
				this.drag.onDrop.call(this,event,this.drag.dropTarget);
				this.triggerEvent.call(this,'ondrop',event,this.drag.dropTarget);
			}
			if(this.drag.dropTarget.drag.onDropOn){
				this.drag.dropTarget.drag.onDropOn.call(this.drag.dropTarget,event,this);
				this.drag.dropTarget.triggerEvent.call(this.drag.dropTarget,'ondropon',event,this);
			}
		}
		if(this.drag.clone && this.drag.node){
			this.drag.node.parentNode.removeChild(this.drag.node);
			this.drag.node=null;
		}
		document.drag.active=false;
		document.drag.node=null;
	}
}

/**
 * is there currently something being dragged over us
 * @param Event event
 */
Node.prototype.drag.checkDropTarget=function(event){
	if(this.drag.isDropTarget & document.drag.active){
		mousePos=getMousePosition(event);
		this.drag.position=this.getPosition();
		this.drag.size=this.getSize(true);
		var offSet=mousePos.substract(this.drag.position);
		if(offSet.inside(this.drag.size)){
			document.drag.node.drag.dropTarget=this;
			document.drag.node.drag.dropable=true;
			setDebug('ontarget');
		}
	}
}

/**
 * called when the mouse is leaving a drop target
 * @param Event event
 */
Node.prototype.drag.leaveDropTarget=function(event){
	if(this.drag.isDropTarget & document.drag.active){
		document.drag.node.drag.dropTarget=null;
		document.drag.node.drag.dropable=false;
		setDebug('offtarget');
	}
}
/**
 * initiate the node as drop target
 */
Node.prototype.drag.initDropTarget=function(){
	this.drag.isDropTarget=true;
	document.drag.dropTargets.push(this);
}
Node.prototype.makeDropTarget=function(){
	this.drag.initDropTarget.call(this);
}

/**
 * initiate the node as draggable
 */
Node.prototype.drag.init=function(){
	this.drag.dragable=true;
	this.drag.size.x=this.getStyle('width');
	this.drag.size.y=this.getStyle('height');
	this.addEvent('onmousedown',new callBack(this.drag.start,this));
}
Node.prototype.makeDraggable=function(){
	this.drag.init.call(this);
}

/**
 * update the dragging. (onmousemove)
 * @param Event event
 */
document.drag.update=function(event){
	var target;
	if(document.drag.active && document.drag.node){
		document.drag.node.drag.update.call(document.drag.node,event);
	}
}

/**
 * update the dragging. (onmousemove)
 * @param Event event
 */
document.drag.stop=function(event){
	if(document.drag.active && document.drag.node){
		document.drag.node.drag.stop.call(document.drag.node,event);
	}
}
document.events.add(document,'onmousemove',document.drag.update);
document.events.add(document,'onmouseup',document.drag.stop);

function getMousePosition(event){
	var pos=new position();
	if(!event)var event = window.event;
	if(event.pageX||event.pageY){
		pos.x=event.pageX;
		pos.y=event.pageY;
	}
	else if(event.clientX||event.clientY){
		pos.x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
		pos.y=event.clientY+document.body.scrollTop+document.documentElement.scrollTop;
	}
	return pos;
}

/**
 * get our position
 **/
Node.prototype.getPosition=function(){
	var pos=new position();
	element=this;
	do{
		pos.y+=element.offsetTop;
		pos.x+=element.offsetLeft;
	}while(element=element.offsetParent);
	return pos;
}

/**
 * get our size
* @param bool full      (also include padding and border)
 **/
Node.prototype.getSize=function(full){
	var pos=new position();
	pos.y= parseInt(this.getStyle('height'));
	pos.x= parseInt(this.getStyle('width'));
	if(full){
		var extraY=['border-size','padding-top','padding-bottom','border-size'];
		var extraX=['border-size','padding-left','padding-right','border-size'];
		var tmp;
		for(var i=0;i<extraY.length;i++){
			tmp=parseInt(this.getStyle(extraY[i]));
			if(tmp){
				pos.y+=tmp;
			}
		}
		for(var i=0;i<extraX.length;i++){
			tmp=parseInt(this.getStyle(extraX[i]));
			if(tmp){
				pos.x+=tmp;
			}
		}
	}
	return pos;
}

function mouseTest(event){
	var pos=getMousePosition(event);
	setDebug(pos.toString());
}

function testDrag(){
	var node=document.getElementById('debug');
// 	document.addEvent('onclick',getOffSet,[node]);
	node.makeDropTarget();
}

function getOffSet(node,event){
	var nodePos=node.getPosition();
	var mousePos=getMousePosition(event);
	return mousePos.substract(nodePos);
}


// OC_onload.add(testDrag);