Drag and Drop Script for Wave

wave-drag-drop.js

(function($) {

	var waveDragDrop = {

		init: function(){
			this.setupInvoiceDragDrop();
			this.setupEstimateDragDrop();
		},

		setupInvoiceDragDrop: function(){
			// make sortable
			var orig_bg_color, orig_padding, orig_border;
			$('#ProductsTable').sortable({
				items: '.ng-scope:not(:last-child)',
				axis: 'y',
				start: function( e, ui ){
					orig_bg_color = $(ui.item).css('background-color');
					orig_padding = $(ui.item).css('padding');
					orig_border = $(ui.item).css('border');

					$(ui.item).css('background-color', '#FFF');
					$(ui.item).css('padding', '3px 6px');
					$(ui.item).css('border', '1px solid #AAA');
				},
				stop: function( e, ui ){
					$(ui.item).css('background-color', orig_bg_color );
					$(ui.item).css('padding', orig_padding );
					$(ui.item).css('border', orig_border );
				},
				over: function( e, ui ){
					$(ui.placeholder).css('border', '2px dashed #AAA');
				},
				sort: function( e, ui ){
					$(ui.placeholder).css('border', '2px dashed #AAA');
				}
			});

			$('#ProductsTable .ng-scope:not(:last-child)').on('hover', function(){
				$(this).css( 'cursor', 'move');
			});
		},

		setupEstimateDragDrop: function(){
			// make sortable
			var orig_bg_color, orig_padding, orig_border;
			$('#LineItemTable').sortable({
				items: 'tr.invoice-item',
				axis: 'y',
				start: function( e, ui ){
					orig_bg_color = $(ui.item).css('background-color');
					orig_padding = $(ui.item).css('padding');
					orig_border = $(ui.item).css('border');

					$(ui.item).css('background-color', '#FFF');
					$(ui.item).css('padding', '3px 6px');
					$(ui.item).css('border', '1px solid #AAA');
				},
				stop: function( e, ui ){
					$(ui.item).css('background-color', orig_bg_color );
					$(ui.item).css('padding', orig_padding );
					$(ui.item).css('border', orig_border );
				},
				over: function( e, ui ){
					$(ui.placeholder).css('border', '2px dashed #AAA');
				},
				sort: function( e, ui ){
					$(ui.placeholder).css('border', '2px dashed #AAA');
				}
			});

			$('#LineItemTable tr.invoice-item').on('hover', function(){
				$(this).css( 'cursor', 'move');
			});
		}

	};

	$(function(){
		waveDragDrop.init();
	});

})(jQuery);