gujc71/dragColumn5.html

## dragColumn5.html
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Table Columns</title>
<style>
table {
    font-size: 11px;
    border-collapse:collapse;
    border:1px solid
}
table td, table th {
    border:1px solid;
    padding: 3px 5px 3px 5px;
}

.tableHead{
    background:#aaa;
    cursor:pointer
}

.draggedDiv {
    position:absolute;
    background:#eee;
}

.dragging {
    background:#eee;
    color:#000
}

.hovering {
    background:#ccc;
    color:#555
}
</style>
<script>
// dragged table's column
window.onload = function() {
    var head = document.getElementsByTagName("th");
    for (i=0; i<head.length; i++) {
        head[i].onselectstart = function() { return false }
        head[i].onmousedown = mousedown;
        head[i].onmouseover = mouseover;
        head[i].onmouseout = mouseout;
        head[i].onmouseup   = mouseup;
        addClass(head[i], "tableHead");
    }
    document.documentElement.onmouseup = documentMouseup;
    document.documentElement.onmousemove = documentMouseMove;
}

function documentMouseup(ev){
    if (!dragTD) { return;}

    removeClass(dragTD, "dragging");
    dragTD = null;
    draggedDiv.parentNode.removeChild(draggedDiv);
    draggedDiv = null;
}

function documentMouseMove(ev){
    if (!draggedDiv) { return;}

    draggedDiv.style.top = ev.pageY + 5 + "px"
    draggedDiv.style.left = ev.pageX + 10 + "px"
}

var dragTD = null, draggedDiv=null;
function mousedown(ev){
    dragTD = this;
    addClass(this, "dragging");

    draggedDiv = document.createElement("div")
    draggedDiv.className = "draggedDiv";
    draggedDiv.style.top = ev.pageY + 5 + "px";
    draggedDiv.style.left = ev.pageX + 10 + "px";
    document.body.appendChild(draggedDiv);

    var dragTable = document.createElement("table")
    draggedDiv.appendChild(dragTable);

    var srcInx = dragTD.cellIndex;
    var table = document.getElementById("tableOne");
    var rows = table.rows;

    for (var x=0; x<rows.length; x++) {
        var tr = rows[x].cloneNode(false);
        dragTable.appendChild(tr);
        var tds = rows[x].cells[srcInx].cloneNode(true);
        tr.appendChild(tds);
    }
}

function mouseover(ev){
    if (dragTD === null) { return;}
    addClass(this, "hovering");
}

function mouseout(ev){
    if (dragTD === null) { return;}
    removeClass(this, "hovering");
}

function mouseup(ev){
    removeClass(this, "hovering");
    removeClass(dragTD, "dragging");
    draggedDiv.parentNode.removeChild(draggedDiv);
    draggedDiv = null;

    var srcInx = dragTD.cellIndex;
    var tarInx = this.cellIndex;
    var table = document.getElementById("tableOne");
    var rows = table.rows;

    for (var x=0; x<rows.length; x++) {
        tds = rows[x].cells;
        rows[x].insertBefore(tds[srcInx], tds[tarInx])
    }

    dragTD = null;
}

function addClass(src, classname) {
    if (src.className.indexOf(classname) === -1 ) {
        src.className += " " + classname;
    }
}

function removeClass(src, classname) {
    src.className = src.className.replace(" " + classname, "");
}
</script>
</head>
<body>
<table id="tableOne">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
            <th>Column 6</th>
            <th>Column 7</th>
            <th>Column 8</th>
            <th>Column 9</th>
            <th>Column 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td>data 5</td>
            <td>data 6</td>
            <td>data 7</td>
            <td>data 8</td>
            <td>data 9</td>
            <td>data 10</td>
        </tr>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td>data 5</td>
            <td>data 6</td>
            <td>data 7</td>
            <td>data 8</td>
            <td>data 9</td>
            <td>data 10</td>
        </tr>
    </tbody>
</table>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Drag and Drop Table Columns</title>
	<style>
	table {
	font-size: 11px;
	border-collapse:collapse;
	border:1px solid
	}
	table td, table th {
	border:1px solid;
	padding: 3px 5px 3px 5px;
	}

	.tableHead{
	background:#aaa;
	cursor:pointer
	}

	.draggedDiv {
	position:absolute;
	background:#eee;
	}

	.dragging {
	background:#eee;
	color:#000
	}

	.hovering {
	background:#ccc;
	color:#555
	}
	</style>
	<script>
	// dragged table's column
	window.onload = function() {
	var head = document.getElementsByTagName("th");
	for (i=0; i<head.length; i++) {
	head[i].onselectstart = function() { return false }
	head[i].onmousedown = mousedown;
	head[i].onmouseover = mouseover;
	head[i].onmouseout = mouseout;
	head[i].onmouseup = mouseup;
	addClass(head[i], "tableHead");
	}
	document.documentElement.onmouseup = documentMouseup;
	document.documentElement.onmousemove = documentMouseMove;
	}

	function documentMouseup(ev){
	if (!dragTD) { return;}

	removeClass(dragTD, "dragging");
	dragTD = null;
	draggedDiv.parentNode.removeChild(draggedDiv);
	draggedDiv = null;
	}

	function documentMouseMove(ev){
	if (!draggedDiv) { return;}

	draggedDiv.style.top = ev.pageY + 5 + "px"
	draggedDiv.style.left = ev.pageX + 10 + "px"
	}

	var dragTD = null, draggedDiv=null;
	function mousedown(ev){
	dragTD = this;
	addClass(this, "dragging");

	draggedDiv = document.createElement("div")
	draggedDiv.className = "draggedDiv";
	draggedDiv.style.top = ev.pageY + 5 + "px";
	draggedDiv.style.left = ev.pageX + 10 + "px";
	document.body.appendChild(draggedDiv);

	var dragTable = document.createElement("table")
	draggedDiv.appendChild(dragTable);

	var srcInx = dragTD.cellIndex;
	var table = document.getElementById("tableOne");
	var rows = table.rows;

	for (var x=0; x<rows.length; x++) {
	var tr = rows[x].cloneNode(false);
	dragTable.appendChild(tr);
	var tds = rows[x].cells[srcInx].cloneNode(true);
	tr.appendChild(tds);
	}
	}

	function mouseover(ev){
	if (dragTD === null) { return;}
	addClass(this, "hovering");
	}

	function mouseout(ev){
	if (dragTD === null) { return;}
	removeClass(this, "hovering");
	}

	function mouseup(ev){
	removeClass(this, "hovering");
	removeClass(dragTD, "dragging");
	draggedDiv.parentNode.removeChild(draggedDiv);
	draggedDiv = null;

	var srcInx = dragTD.cellIndex;
	var tarInx = this.cellIndex;
	var table = document.getElementById("tableOne");
	var rows = table.rows;

	for (var x=0; x<rows.length; x++) {
	tds = rows[x].cells;
	rows[x].insertBefore(tds[srcInx], tds[tarInx])
	}

	dragTD = null;
	}

	function addClass(src, classname) {
	if (src.className.indexOf(classname) === -1 ) {
	src.className += " " + classname;
	}
	}

	function removeClass(src, classname) {
	src.className = src.className.replace(" " + classname, "");
	}
	</script>
	</head>
	<body>
	<table id="tableOne">
	<thead>
	<tr>
	<th>Column 1</th>
	<th>Column 2</th>
	<th>Column 3</th>
	<th>Column 4</th>
	<th>Column 5</th>
	<th>Column 6</th>
	<th>Column 7</th>
	<th>Column 8</th>
	<th>Column 9</th>
	<th>Column 10</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>data 1</td>
	<td>data 2</td>
	<td>data 3</td>
	<td>data 4</td>
	<td>data 5</td>
	<td>data 6</td>
	<td>data 7</td>
	<td>data 8</td>
	<td>data 9</td>
	<td>data 10</td>
	</tr>
	<tr>
	<td>data 1</td>
	<td>data 2</td>
	<td>data 3</td>
	<td>data 4</td>
	<td>data 5</td>
	<td>data 6</td>
	<td>data 7</td>
	<td>data 8</td>
	<td>data 9</td>
	<td>data 10</td>
	</tr>
	</tbody>
	</table>

	</body>
	</html>