gujc71/dragColumn6.html

## dragColumn6.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 src='https://code.jquery.com/jquery-3.2.1.slim.js'
        integrity='sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=' crossorigin='anonymous'></script>
<script>
// JQuery
$(function() {
    var heads = $("#tableOne th");

    $.each(heads, function(inx, row ) {
        var head = $(row);
        head.bind( "selectstart", function() { return false });
        head.bind( "mousedown", mousedown);
        head.bind( "mouseover", mouseover);
        head.bind( "mouseout", mouseout);
        head.bind( "mouseup", mouseup);

        head.addClass("tableHead");
    });
    $(document.documentElement).bind( "mouseup", documentMouseup);
    $(document.documentElement).bind( "mousemove", documentMouseMove);
});

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

    $(dragTD).removeClass("dragging");
    dragTD = null;
    draggedDiv.remove();
    draggedDiv = null;
}

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

    draggedDiv.css({top: ev.pageY + 5 + "px", left: ev.pageX + 10 + "px"});
}

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

    draggedDiv = $("<div>");
    draggedDiv.addClass("draggedDiv");
    draggedDiv.css({top: ev.pageY + 5 + "px", left:ev.pageX + 10 + "px"});
    $(document.documentElement).append(draggedDiv);

    var dragTable = $("<table>");
    draggedDiv.append(dragTable);

    var srcInx = dragTD.cellIndex;
    var rows = $("#tableOne tr");

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

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

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

function mouseup(ev){
    $(this).removeClass("hovering");
    $(dragTD).removeClass("dragging");
    draggedDiv.remove();
    draggedDiv = null;

    var srcInx = dragTD.cellIndex;
    var tarInx = this.cellIndex;
    var rows = $("#tableOne tr");

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

    dragTD = null;
}

</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 src='https://code.jquery.com/jquery-3.2.1.slim.js'
	integrity='sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=' crossorigin='anonymous'></script>
	<script>
	// JQuery
	$(function() {
	var heads = $("#tableOne th");

	$.each(heads, function(inx, row ) {
	var head = $(row);
	head.bind( "selectstart", function() { return false });
	head.bind( "mousedown", mousedown);
	head.bind( "mouseover", mouseover);
	head.bind( "mouseout", mouseout);
	head.bind( "mouseup", mouseup);

	head.addClass("tableHead");
	});
	$(document.documentElement).bind( "mouseup", documentMouseup);
	$(document.documentElement).bind( "mousemove", documentMouseMove);
	});

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

	$(dragTD).removeClass("dragging");
	dragTD = null;
	draggedDiv.remove();
	draggedDiv = null;
	}

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

	draggedDiv.css({top: ev.pageY + 5 + "px", left: ev.pageX + 10 + "px"});
	}

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

	draggedDiv = $("<div>");
	draggedDiv.addClass("draggedDiv");
	draggedDiv.css({top: ev.pageY + 5 + "px", left:ev.pageX + 10 + "px"});
	$(document.documentElement).append(draggedDiv);

	var dragTable = $("<table>");
	draggedDiv.append(dragTable);

	var srcInx = dragTD.cellIndex;
	var rows = $("#tableOne tr");

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

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

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

	function mouseup(ev){
	$(this).removeClass("hovering");
	$(dragTD).removeClass("dragging");
	draggedDiv.remove();
	draggedDiv = null;

	var srcInx = dragTD.cellIndex;
	var tarInx = this.cellIndex;
	var rows = $("#tableOne tr");

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

	dragTD = null;
	}

	</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>