https://portal.roma.de/scripts/resizeableSplitComponent.js

1function initializeSplitComponent(minSizeLeft, maxSizeLeft) {
2
3	var wrapper = $('#split-wrapper');
4	var leftSide = $('#left-side');
5	var handler = $('#resize-handler');
6	var isHandlerDragging = false;
7
8	$(handler).on('mousedown', handleMouseDown);
9	$(document).on('mouseup', handleMouseUp);
10	$(wrapper).on('mousemove', handleMouseMovement);
11
12	function handleMouseDown() {
13		isHandlerDragging = true;
14	}
15
16	function handleMouseUp() {
17		isHandlerDragging = false;
18	}
19
20	function handleMouseMovement(e) {
21
22		if (!isHandlerDragging) {
23			return;
24		}
25
26		var wrapperOffsetLeft = wrapper.offset().left;
27		var pointerRelativeXPos = e.clientX - wrapperOffsetLeft;
28		var width = pointerRelativeXPos < minSizeLeft ? minSizeLeft : pointerRelativeXPos;
29		width = width > maxSizeLeft ? maxSizeLeft : width;
30		leftSide.css('width', width+'px');
31	}
32}
33
34function disposeSplitComponent() {
35
36	var wrapper = $('#split-wrapper');
37	var handler = $('#resize-handler');
38
39	$(handler).off('mousedown');
40	$(document).off('mouseup');
41	$(wrapper).off('mousemove');
42}