davemo/Cross Table Drag Drop.html

## Cross Table Drag Drop.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>untitled</title>
    	<meta name="generator" content="TextMate http://macromates.com/">
    	<meta name="author" content="David Mosher">
    	<!-- Date: 2010-11-18 -->
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="https://github.com/documentcloud/underscore/raw/master/underscore-min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="js/jqDataTable/js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>

        <style>
            .wrapper {
                clear: both;
                margin: 0 auto;
                width: 100%;
                overflow: hidden;
            }

            #clipboard {
                float: left;
                width: 30%;
                margin-right: 10px;
            }

            #order-guide {
                float: left;
                width: 68%;
            }

            h2 {
                margin-bottom: 0px;
            }

            /** Plugin Hooks, these classes are generated by the dataTables plugin **/

            .dataTables_length {
                float: left;
                width: 40%;
                display: none; }

            .dataTables_filter {
                float: right;
                text-align: right;
                width: 50%;
                display: none; }

            .dataTables_wrapper {
                clear: both;
                min-height: 302px;
                position: relative; }

                .dataTables_wrapper * {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 11px; }

            .dataTables_info {
                float: left;
                width: 60%; }

            .dataTables_paginate {
                float:right;
                text-align:right;
                width:44px; }

            .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
                font-weight: bold;
            }

            /** Our own table styling **/

            table.widget {
                width: 100%;
                border: 1px solid #CCCCCC;
                border-collapse: collapse;
                float: left;
                margin: 10px 0px;}

                table.widget td {
                    padding: 3px 10px; }

                table.widget th {
                    border-bottom: 1px solid #CBCBCB;
                }

                table.widget th {
                    padding: 6px;
                    text-align: left;
                    background-color: #F7F7F7;
                    color: #7B7B7B;}

                    table.widget th:hover {
                        cursor: pointer; }

                table.widget tr:hover td  {
                    background: #eddb86 !important;
                }

                table.widget tr.even {
                    background: #FDFAEC; }

                    table.widget tr.even td.sorting_1 {
                        background: #e4e2d7; }

                    table.widget tr.odd td.sorting_1 {
                        background: #b4b2a9; }

        </style>

    </head>
    <body>
        <h1>Table Drag / Drop with jQuery UI Sortables</h1>
        <p>Drag rows from 1 table to another, works in IE!</p>
        <h3>TODO:</h3>
        <ul>
            <li>Styling fixes</li>
            <li>Callbacks on drop etc..</li>
            <li>Test at Scale in IE (like, thousands of rows)</li>
        </ul>

        <div class="wrapper">
            <div id="clipboard">
                <h2>Clipboard</h2>
                <table class="items widget linked"></table>
            </div>

            <div id="order-guide">
                <h2>Order Guide</h2>
                <table class="items widget linked"></table>
            </div>
        </div>


        <script type="text/javascript" charset="utf-8">

            // sample server data
            var data = [
               {
                  "breakable":false,
                  "PackUnit":"",
                  "id":32381158,
                  "itemCode":"900942",
                  "itemDescription":"6-.85# CILANTRO LIME CONC-14806    ",
                  "itemUid":32381158,
                  "lastPurchased":null,
                  "price":55.420,
                  "pricedInLessCase":false
               },
               {
                  "breakable":false,
                  "PackUnit":"",
                  "id":32381161,
                  "itemCode":"918814",
                  "itemDescription":"4-1 GAL CILANTRO LEM VINAG DL-1979",
                  "itemUid":32381161,
                  "lastPurchased":null,
                  "price":52.640,
                  "pricedInLessCase":false
               },
               {
                  "breakable":false,
                  "PackUnit":"",
                  "id":54689878,
                  "itemCode":"200131",
                  "itemDescription":"LOBSTER TL NATLC 6-7Z 10# P/L",
                  "itemUid":54689878,
                  "lastPurchased":null,
                  "price":79.884,
                  "pricedInLessCase":false
               }
            ];

            // gimme an array for jquery datatables, son!
            var transpose = function(data) {
                var headers = [];
                var values = [];

                _.map(data[0], function(val, key, list) {
                    headers.push({"sTitle" : key});
                });

                _.each(data, function(e, i, list){
                    values.push([]);
                    _.map(e, function(val, key, list) {
                        values[i].push(val);
                    });
                });

                return {
                    headers: headers,
                    values: values
                };
            };

            // massages the data we get back from the server in this case to a jquery datatables palatable format
            data = transpose(data);

            $(function() {

                // make me a table or two, son
                $("#order-guide .items").dataTable({
                    "aaData" : data.values,
                    "aoColumns" : data.headers,
                    "bSort": false
                });

                $("#clipboard .items").dataTable({
                    "aaData" : [
                        [10293, "Sausages"]
                    ],
                    "aoColumns" : [
                        {"sTitle" : "Item Code"},
                        {"sTitle" : "Item Description"}
                    ],
                    "bSort": false
                });

                // helper to fix dragging rendering with sortables
                // http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/
                var fixHelper = function(e, ui) {
                    ui.children().each(function() {
                        $(this).width($(this).width());
                    });
                    return ui;
                };

                // the secret sauce
                $(".items tbody").sortable({
                    helper: fixHelper,
                    connectWith: ".linked tbody" // this is like magic
                }).disableSelection();
            });
        </script>
    </body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="David Mosher">
	<!-- Date: 2010-11-18 -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://github.com/documentcloud/underscore/raw/master/underscore-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jqDataTable/js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>

	<style>
	.wrapper {
	clear: both;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
	}

	#clipboard {
	float: left;
	width: 30%;
	margin-right: 10px;
	}

	#order-guide {
	float: left;
	width: 68%;
	}

	h2 {
	margin-bottom: 0px;
	}

	/ Plugin Hooks, these classes are generated by the dataTables plugin /

	.dataTables_length {
	float: left;
	width: 40%;
	display: none; }

	.dataTables_filter {
	float: right;
	text-align: right;
	width: 50%;
	display: none; }

	.dataTables_wrapper {
	clear: both;
	min-height: 302px;
	position: relative; }

	.dataTables_wrapper * {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px; }

	.dataTables_info {
	float: left;
	width: 60%; }

	.dataTables_paginate {
	float:right;
	text-align:right;
	width:44px; }

	.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
	font-weight: bold;
	}

	/ Our own table styling /

	table.widget {
	width: 100%;
	border: 1px solid #CCCCCC;
	border-collapse: collapse;
	float: left;
	margin: 10px 0px;}

	table.widget td {
	padding: 3px 10px; }

	table.widget th {
	border-bottom: 1px solid #CBCBCB;
	}

	table.widget th {
	padding: 6px;
	text-align: left;
	background-color: #F7F7F7;
	color: #7B7B7B;}

	table.widget th:hover {
	cursor: pointer; }

	table.widget tr:hover td {
	background: #eddb86 !important;
	}

	table.widget tr.even {
	background: #FDFAEC; }

	table.widget tr.even td.sorting_1 {
	background: #e4e2d7; }

	table.widget tr.odd td.sorting_1 {
	background: #b4b2a9; }

	</style>

	</head>
	<body>
	<h1>Table Drag / Drop with jQuery UI Sortables</h1>
	<p>Drag rows from 1 table to another, works in IE!</p>
	<h3>TODO:</h3>
	<ul>
	<li>Styling fixes</li>
	<li>Callbacks on drop etc..</li>
	<li>Test at Scale in IE (like, thousands of rows)</li>
	</ul>

	<div class="wrapper">
	<div id="clipboard">
	<h2>Clipboard</h2>
	<table class="items widget linked"></table>
	</div>

	<div id="order-guide">
	<h2>Order Guide</h2>
	<table class="items widget linked"></table>
	</div>
	</div>


	<script type="text/javascript" charset="utf-8">

	// sample server data
	var data = [
	{
	"breakable":false,
	"PackUnit":"",
	"id":32381158,
	"itemCode":"900942",
	"itemDescription":"6-.85# CILANTRO LIME CONC-14806 ",
	"itemUid":32381158,
	"lastPurchased":null,
	"price":55.420,
	"pricedInLessCase":false
	},
	{
	"breakable":false,
	"PackUnit":"",
	"id":32381161,
	"itemCode":"918814",
	"itemDescription":"4-1 GAL CILANTRO LEM VINAG DL-1979",
	"itemUid":32381161,
	"lastPurchased":null,
	"price":52.640,
	"pricedInLessCase":false
	},
	{
	"breakable":false,
	"PackUnit":"",
	"id":54689878,
	"itemCode":"200131",
	"itemDescription":"LOBSTER TL NATLC 6-7Z 10# P/L",
	"itemUid":54689878,
	"lastPurchased":null,
	"price":79.884,
	"pricedInLessCase":false
	}
	];

	// gimme an array for jquery datatables, son!
	var transpose = function(data) {
	var headers = [];
	var values = [];

	_.map(data[0], function(val, key, list) {
	headers.push({"sTitle" : key});
	});

	_.each(data, function(e, i, list){
	values.push([]);
	_.map(e, function(val, key, list) {
	values[i].push(val);
	});
	});

	return {
	headers: headers,
	values: values
	};
	};

	// massages the data we get back from the server in this case to a jquery datatables palatable format
	data = transpose(data);

	$(function() {

	// make me a table or two, son
	$("#order-guide .items").dataTable({
	"aaData" : data.values,
	"aoColumns" : data.headers,
	"bSort": false
	});

	$("#clipboard .items").dataTable({
	"aaData" : [
	[10293, "Sausages"]
	],
	"aoColumns" : [
	{"sTitle" : "Item Code"},
	{"sTitle" : "Item Description"}
	],
	"bSort": false
	});

	// helper to fix dragging rendering with sortables
	// http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/
	var fixHelper = function(e, ui) {
	ui.children().each(function() {
	$(this).width($(this).width());
	});
	return ui;
	};

	// the secret sauce
	$(".items tbody").sortable({
	helper: fixHelper,
	connectWith: ".linked tbody" // this is like magic
	}).disableSelection();
	});
	</script>
	</body>
	</html>