Highlight panel sorting and drop zones

css/panels.css

@@ -6,6 +6,27 @@
 		flex-grow: 1;
 		display: flex;
 		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.panel[order]::before {
+		content: '';
+		height: 2px;
+		left: 0;
+		right: 0;
+		background: var(--color-accent);
+		z-index: 3;
+		display: block;
+		position: absolute;
+	}
+	.panel[order] {
+		position: relative;
+	}
+	.panel[order="-1"]::before {
+		margin-top: -2px;
+	}
+	.panel[order="1"]::before {
+		bottom: 0px;
 	}
 
 /*Display*/

css/window.css

@@ -68,6 +68,7 @@
 		margin-left: 12px;
 	}
 	body > h3.panel_handle {
+		pointer-events: none;
 		box-shadow: 0 0 16px black;
 		width: auto;
 	}

js/animations/keyframe.js

@@ -350,6 +350,7 @@ class Keyframe {
 	])
 	new Property(Keyframe, 'number', 'time')
 	new Property(Keyframe, 'number', 'color', {default: -1})
+	Keyframe.selected = [];
 
 // Misc Functions
 function updateKeyframeValue(axis, value) {

js/animations/timeline.js

@@ -36,7 +36,7 @@ TimelineMarker.prototype.menu = new Menu([
 
 const Timeline = {
 	animators: [],
-	selected: [],//frames
+	selected: Keyframe.selected,//frames
 	playing_sounds: [],
 	playback_speed: 100,
 	time: 0,

js/interface/panels.js

@@ -59,7 +59,20 @@ class Panel {
 				start: function() {
 					Interface.panel = scope;
 				},
+				drag(e, ui) {
+					$('.panel[order]').attr('order', null)
+					let target_panel = $('div.panel:hover').get(0);
+					if (!target_panel) return;
+					let top = $(target_panel).offset().top;
+					let height = target_panel.clientHeight;
+					if (e.clientY > top + height/2) {
+						$(target_panel).attr('order', 1);
+					} else {
+						$(target_panel).attr('order', -1);
+					}
+				},
 				stop: function(e, ui) {
+					$('.panel[order]').attr('order', null)
 					if (!ui) return;
 					if (Math.abs(ui.position.top - ui.originalPosition.top) + Math.abs(ui.position.left - ui.originalPosition.left) < 180) return;
 					let target = Interface.panel