Untitled

dabblet.css

body {
	font-family: sans-serif;
}
ul#tabs {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	padding: 1em;
	border: thin solid #ccc;
	box-sizing: border-box;
}
ul#tabs>li {
	border: thin solid #ccc;
	padding: .5em;
	box-sizing: border-box;
}
li[draggable] {
	background-color: #f8f8f8;
	cursor: move;
	user-select: none;
}
ul#tabs>li.dragging {
	border-color: red;
}
ul#tabs>li.dragover-before {
	border-left: thick solid red;
}
ul#tabs>li.dragover-after {
	border-right: thick solid green;
}

dabblet.html

<ul id="tabs">
	<li>Apple</li>
	<li>Banana</li>
	<li>Cherry</li>
	<li>Date</li>
	<li>Elderberry</li>
</ul>

dabblet.js

var Rearrangeable=function(direction='h',className='dragover') {
		var element;
		this.add=function(e) {
			e.draggable=true;

			e.addEventListener('dragstart',this.dragstart.bind(this),false);
			e.addEventListener('dragenter',this.dragenter.bind(this),false);
			e.addEventListener('dragover',this.dragover.bind(this),false);
			e.addEventListener('dragleave',this.dragleave.bind(this),false);
			e.addEventListener('drop',this.drop.bind(this),false);
			e.addEventListener('dragend',this.dragend.bind(this),false);
		};
		this.highlight=function(element,which) {
			if(which=='before') element.classList.add(`${className}-before`);
			else element.classList.remove(`${className}-before`);
			if(which=='after') element.classList.add(`${className}-after`);
			else element.classList.remove(`${className}-after`);
		};

		//	Element
			this.dragstart=function(event) {
				var target=event.currentTarget;
				this.element=target;
				event.dataTransfer.effectAllowed='move';
				//	event.dataTransfer.setData('text/html',this.outerHTML);
				target.classList.add(`${className}-start`);
			};
			this.drag=function(event) {
				var target=event.currentTarget;
			};
			this.dragend=function(event) {
				var target=event.currentTarget;
				this.highlight(target);
				target.classList.remove(`${className}-start`);
			};

		//	Target
			this.dragenter=function(event) {
				var target=event.currentTarget;
			};
			this.dragover=function(event) {
				var target=event.currentTarget;
				event.preventDefault();
				event.dataTransfer.dropEffect='move';
				if(direction=='v') {
					if(event.clientY<(target.getBoundingClientRect().top+target.getBoundingClientRect().bottom)/2) this.highlight(turrentTarget,'before');
					else this.highlight(target,'after');
				}
				else {
					if(event.clientX<(target.getBoundingClientRect().left+target.getBoundingClientRect().right)/2) this.highlight(target,'before');
					else this.highlight(target,'after');
				}
			};
			this.dragleave=function(event) {
				var target=event.currentTarget;
//				if(target)
				this.highlight(target);
			};
			this.drop=function(event) {
				var target=event.currentTarget;
				event.stopPropagation();
				if(this.element!=target) {
					if(target.classList.contains(`${className}-before`)) {
						target.insertAdjacentElement('beforebegin',this.element);
					}
					else if(target.classList.contains(`${className}-after`)) {
						target.insertAdjacentElement('afterend',this.element);
					}
				}
				this.highlight(target);
			};
	};

var dragGroup=new Rearrangeable();
var tabs=document.querySelectorAll('ul#tabs>li');
tabs.forEach(tab=>{dragGroup.add(tab);});

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"javascript"}