Version v 0.7.4 number change only

New dragSrcEl variable and 4 x functions to hand start, over, drop and
end
Means tabs can now be dragged & all references appropriately swapped

editor.php

@@ -112,9 +112,9 @@ function createNewCMInstance(num) {
 	onCursorActivity: function() {
 		top.ICEcoder.getCaretPosition();
 		top.ICEcoder.updateCharDisplay();
-		window['cM'+top.ICEcoder.cMInstances[top.ICEcoder.selectedTab-1]].setLineClass(top.ICEcoder['cMActiveLine'+top.ICEcoder.selectedTab], null);
-		if(!window['cM'+top.ICEcoder.cMInstances[top.ICEcoder.selectedTab-1]].somethingSelected()) {
-			top.ICEcoder['cMActiveLine'+top.ICEcoder.selectedTab] = window['cM'+top.ICEcoder.cMInstances[top.ICEcoder.selectedTab-1]].setLineClass(window['cM'+top.ICEcoder.cMInstances[top.ICEcoder.selectedTab-1]].getCursor().line, "cm-s-activeLine");
+		window['cM'+num].setLineClass(top.ICEcoder['cMActiveLine'+num], null);
+		if(!window['cM'+num].somethingSelected()) {
+			top.ICEcoder['cMActiveLine'+num] = window['cM'+num].setLineClass(window['cM'+num].getCursor().line, "cm-s-activeLine");
 		}
 		window['cM'+top.ICEcoder.cMInstances[top.ICEcoder.selectedTab-1]].matchHighlight("CodeMirror-matchhighlight");
 		top.ICEcoder.cssColorPreview();
@@ -188,7 +188,7 @@ function createNewCMInstance(num) {
 	});
 
 	// Now create the active line for this CodeMirror object
-	top.ICEcoder['cMActiveLine'+top.ICEcoder.selectedTab] = window['cM'+top.ICEcoder.cMInstances[top.ICEcoder.selectedTab-1]].setLineClass(0, "cm-s-activeLine");
+	top.ICEcoder['cMActiveLine'+num] = window['cM'+num].setLineClass(0, "cm-s-activeLine");
 };
 
 </script>

index.php

@@ -133,7 +133,7 @@ previousFiles = [<?php
 	<div id="tabsBar" class="tabsBar" onContextMenu="return false">
 		<?php
 		for ($i=1;$i<=10;$i++) {
-			echo '<div id="tab'.$i.'" class="tab" onClick="if(ICEcoder.canSwitchTabs) {ICEcoder.switchTab('.$i.')} else {ICEcoder.canSwitchTabs=true}"></div>';
+			echo '<div id="tab'.$i.'" class="tab" draggable="true" onClick="if(ICEcoder.canSwitchTabs) {ICEcoder.switchTab('.$i.')} else {ICEcoder.canSwitchTabs=true}"></div>';
 		}
 		?><div class="newTab" onClick="ICEcoder.newTab()"><img src="images/nav-new.png"></div>
 	</div>

lib/coder.js

@@ -23,6 +23,7 @@ var ICEcoder = {
 	stickyTab: false,		// If we have a sticky tab open or not
 	stickyTabWindow: false,		// Target variable for the sticky tab window
 	pluginIntervalRefs: [],		// Array of plugin interval refs
+	dragSrcEl: null,		// Tab element being dragged
 
 	// Don't consider these tags as part of nesting as they're singles, JS, PHP or Ruby code blocks
 	tagNestExceptions: ["!DOCTYPE","meta","link","img","br","hr","input","script","?php","?","%"],
@@ -50,6 +51,16 @@ var ICEcoder = {
 			top.document.getElementById('accountLogin').style.top = "-50px";
 			setTimeout(function() {top.document.getElementById('accountLoginContainer').style.display = "none";},300);
 		}
+
+		// Add drag based events to our tabs
+		var tabs = document.querySelectorAll('.tab');
+		[].forEach.call(tabs, function(tab) {
+			// not used: dragenter, dragleave
+			tab.addEventListener('dragstart', ICEcoder.handleDragStart, false);
+			tab.addEventListener('dragover', ICEcoder.handleDragOver, false);
+			tab.addEventListener('drop', ICEcoder.handleDrop, false);
+			tab.addEventListener('dragend', ICEcoder.handleDragEnd, false);
+		});
 	},
 
 	// Set our layout according to the browser size
@@ -1572,5 +1583,56 @@ var ICEcoder = {
 	zipIt: function(tgt) {
 		tgt=tgt.replace(top.fullPath+"/","").replace(/\//g,"|");
 		top.ICEcoder.filesFrame.contentWindow.frames['fileControl'].location.href="plugins/zip-it/index.php?zip="+tgt;
+	},
+
+	// Tab dragging start
+	handleDragStart: function(e) {
+		this.style.opacity = '0.2';
+		ICEcoder.dragSrcEl = this;
+		e.dataTransfer.effectAllowed = 'move';
+		e.dataTransfer.setData('text/html', this.innerHTML);
+	},
+
+	// Tab dragging over tabs
+	handleDragOver: function(e) {
+		if (e.preventDefault) {e.preventDefault()}
+		e.dataTransfer.dropEffect = 'move';
+		return false;
+	},
+
+	// Tab dropping on target
+	handleDrop: function(e) {
+		if (e.stopPropagation) {e.stopPropagation()}
+		if (ICEcoder.dragSrcEl != this) {
+			ICEcoder.dragSrcEl.innerHTML = this.innerHTML.split(" ")[0] + ICEcoder.dragSrcEl.innerHTML.substr(ICEcoder.dragSrcEl.innerHTML.indexOf(" "),ICEcoder.dragSrcEl.innerHTML.length);
+			this.innerHTML = e.dataTransfer.getData('text/html').split(" ")[0] + this.innerHTML.substr(ICEcoder.dragSrcEl.innerHTML.indexOf(" "),ICEcoder.dragSrcEl.innerHTML.length);
+			var dragID = ICEcoder.dragSrcEl.id.substr(3,ICEcoder.dragSrcEl.id.length)*1;
+			var dropID = this.id.substr(3,this.id.length)*1;
+			if(dragID==top.ICEcoder.selectedTab) {
+				var a; // array value
+				var b = dragID-1;
+				var c = dropID-1;
+
+				a = top.ICEcoder.changedContent;
+				a[b]=[a[c],a[c]=a[b]][0];
+
+				a = top.ICEcoder.openFiles;
+				a[b]=[a[c],a[c]=a[b]][0];
+
+				a = top.ICEcoder.openFileMDTs;
+				a[b]=[a[c],a[c]=a[b]][0];
+
+				a = top.ICEcoder.cMInstances;
+				a[b]=[a[c],a[c]=a[b]][0];
+
+				top.ICEcoder.switchTab(dropID);
+			}
+		}
+		return false;
+	},
+
+	// Tab drag ending
+	handleDragEnd: function(e) {
+		this.style.opacity = '1';
 	}
 };

lib/config.php

@@ -1,5 +1,5 @@
 <?php
-$versionNo		= "v 0.7.3";
+$versionNo		= "v 0.7.4";
 $codeMirrorDir		= "CodeMirror-2.25";
 $cMThisVer		= 2.25;
 $tabsIndent		= true;