init

modules/EcmPaymentStates/javascript/multiMatch.js

@@ -0,0 +1,58 @@
+var LEFT = new Array();
+var RIGHT = new Array();
+
+$(function() {
+	$("div[id^=draggable_]").draggable();
+	
+    $( "#left_drop" ).droppable({
+        drop: function( event, ui ) {
+        	$(ui.draggable).hide();
+        	
+        	var row = new Object();
+        	
+        	row.id = $(ui.draggable).hide().attr('id').split("_")[1];
+        	row.value = $(ui.draggable).find('input').val();
+        	row.name = $(ui.draggable).find('#name').html();
+        	row.date = $(ui.draggable).find('#date').html();
+        	
+        	LEFT.push(row);
+        	DrawLeftTable();
+        }
+      });
+  
+    $( "#right_drop" ).droppable({
+        drop: function( event, ui ) {
+        	$(ui.draggable).hide();
+        	
+        	var row = new Object();
+        	
+        	row.id = $(ui.draggable).hide().attr('id').split("_")[1];
+        	row.value = $(ui.draggable).find('input').val();
+        	row.name = $(ui.draggable).find('#name').html();
+        	row.date = $(ui.draggable).find('#date').html();
+        	
+        	RIGHT.push(row);
+        	DrawRightTable();
+        }
+      });
+});
+
+function DrawLeftTable() {
+	//clear data
+	$("#left_site").empty();
+	
+	for (var i=0; i<LEFT.length; i++) {
+		var row = '<tr style="width: 100%"><td style="width: 34%;">'+LEFT[i].name+'</td><td style="width: 33%;">'+LEFT[i].date+'</td><td style="width: 33%;">'+LEFT[i].value+'</td></tr>';
+		$("#left_site").append(row);
+	}
+}
+
+function DrawRightTable() {
+	//clear data
+	$("#right_site").empty();
+	
+	for (var i=0; i<LEFT.length; i++) {
+		var row = '<tr style="width: 100%"><td style="width: 34%;">'+LEFT[i].name+'</td><td style="width: 33%;">'+LEFT[i].date+'</td><td style="width: 33%;">'+LEFT[i].value+'</td></tr>';
+		$("#right_site").append(row);
+	}
+}