Anonymous

<html>
	<head>
		<link href="rp.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript">

	/*
		Item 	= represents an ELEMENT that can be clicked and dragged
		Table	= represents a TABLE that can have rows and/or columns created on the fly.
	 */

var dropTarget;



		window.onload = function() {
			var report_table = new Table("report_table");

			dropTarget = report_table;

			var column_item = new Item("column");
			var pb_item = new Item("pb");
		}

		function getMouseXY(e) {
			e = e ? e : window.event;	

			if (e.pageX || e.pageY)
				return {x:e.pageX, y:e.pageY};

			return {x:e.clientX + document.body.scrollLeft - document.body.clientLeft,
	  			y:e.clientY + document.body.scrollTop - document.body.clientTop};
		}

		function getPosition(element) {
			return {x:parseInt(element.offsetLeft), y:parseInt(element.offsetTop)};
		}

		function getDimension(element) {
			return	{x:parseInt(element.offsetWidth), y:parseInt(element.offsetHeight)};
		}

		function Item(id) {
			this.item = document.getElementById(id);
			if (this.item && this.item.nodeName == "SPAN") {
				this.id = id;
				this.state = null;	
				this.pos = getPosition(this.item);	

				this.item.style.left = this.pos.x;
				this.item.style.top = this.pos.y;

				this.item.onmousedown = function(that) {
					return function(e) {
						e = e ? e : window.event;
						
						that.x = e.clientX;
						that.y = e.clientY;
						
						that.grabItem(e);
						return false;
					}
				}(this);

				this.item.onmouseup = function(that) {
					return function(e) {
						that.dropItem(e);
						return false;
					}
				}(this);
			}
		}

		Item.prototype.grabItem = function(e) {
			//console.log("mouse down");

			e = e ? e : window.event;
			var elm = e.target ? e.target : e.srcElement;
		
			elm.style.position = "absolute";

			var x = parseInt(elm.style.left);
			var y = parseInt(elm.style.top);
			var mouse = getMouseXY(e);

			document.onmousemove = function(that) {
				return function(e) {
					that.state = "dragging";


					that.item.style.left = x + (getMouseXY(e).x - mouse.x) + 'px';
					that.item.style.top = y + (getMouseXY(e).y - mouse.y) + 'px';

		//			that.item.style.left = x + (e.clientX - mouse.x) + 'px';
		//			that.item.style.top = y + (e.clientY - mouse.y) + 'px';

					return false;	
				}
			}(this);
		}

		Item.prototype.dropItem = function(e) {
			e = e ? e : window.event;
			var position = getPosition(dropTarget.tbl);
			var dimension = getDimension(dropTarget.tbl);
			var mouse = getMouseXY(e);

			if(	(mouse.x > position.x) &&
				(mouse.y > position.y) &&
				(mouse.x < (dimension.x + position.x)) &&
				(mouse.y < (dimension.y + position.y)) ) {

				//console.log(this.item.getAttribute("class"));

				if (this.item.getAttribute("class") == "row") dropTarget.addRow();
				else if(this.item.getAttribute("class") == "column") dropTarget.addColumn();
				else {}
			}

			this.item.style.left = this.pos.x;
			this.item.style.top = this.pos.y;

			document.onmousemove = null;
		
			//console.log("mouse up");
		}

		function Table(id) {
			this.tbl = document.getElementById(id);
			if (this.tbl && this.tbl.nodeName == "TABLE") {
				this.id = id;
				this.state = null;
				this.cols = this.tbl.getElementsByTagName("col");
				this.rows = this.tbl.getElementsByTagName("tr");

				this.tbl.onmouseover = function(that) {
					return function(e) {
						that.state = "droppable";
//						//console.info(that.getId() + " state = " + that.getState());
						return false;
					}
				}(this);

				this.tbl.onmouseout = function(that) {
					return function(e) {
						that.state = null;
//						console.warn(that.getId() + " state = " + that.getState());
						return false;
					}
				}(this);
			}
		}

		Table.prototype.addColumn = function() {
			// add <col /> tag
			var col = document.createElement("col");
			this.tbl.insertBefore(col, this.tbl.tHead);

			// cycle thru rows (skip <thead>)
			for (var i = 1; this.tbl.rows[i]; i++) {
				var td = document.createElement("TD");

				// append cell to each row
				this.tbl.rows[i].appendChild(td);
			}

			//console.info(this.getCols().length + " columns");

		}

		Table.prototype.addRow = function() {
			// create new row
			var tr = document.createElement("TR");

			// create create TD for each column
			for (var i = 0; this.cols[i]; i++) {
				var td = document.createElement("TD");

				tr.appendChild(td);
			}

			// add everything together
			this.tbl.tBodies[0].appendChild(tr);

			//console.info(this.getRows().length + " rows");

		}

		Table.prototype.setState = function(state) {
			this.state = state;
		}

		Object.prototype.getState = function() {
			return this.state;
		}

		Object.prototype.getId = function() {
			return this.id;
		}

		Object.prototype.getObject = function() {
			return this;
		}

		Table.prototype.getRows = function() {
			return this.rows;
		}

		Table.prototype.getCols = function() {
			return this.cols;
		}

		</script>
	</head>
	<body>
		<table id="palette">
			<thead>
			</thead>
			<tfoot>
			</tfoot>
			<tbody>
				<tr>
					<td class="draggeable">
						<span id="column" class="column"> NEW COLUMN </span>
					</td>
					<td class="draggeable">
						<span id="pb" class="row"> PAGE BREAK </span>
					</td>
				</tr>
			</tbody>
		</table>
		<table id="report_table">

			<col />

			<thead>
				<tr>
					<th colspan="99"> REPORT TITLE </th>
				</tr>

			</thead>
			<tfoot>
			</tfoot>
			<tbody id="b">
				<tr>
					<td>
						&nbsp;
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>