var tabs=document.querySelectorAll('ul#tabs>li');
//	tabs[3].previousElementSibling.insertAdjacentElement('beforebegin',tabs[3]);
doDrag(tabs);

function doDrag(elements) {
	var element;
	elements.forEach(e=>{draggable(e);});
	function draggable(e) {
		e.draggable=true;

		e.addEventListener('dragstart',dragstart,false);
		e.addEventListener('dragenter',dragenter,false);
		e.addEventListener('dragover',dragover,false);
		e.addEventListener('dragleave',dragleave,false);
		e.addEventListener('drop',drop,false);
		e.addEventListener('dragend',dragend,false);
	}

	function lolight(element) {
		element.classList.remove('dragover-before');
		element.classList.remove('dragover-after');
	}

	//	Element
		function dragstart(event) {
			element=this;
			event.dataTransfer.effectAllowed='move';
//			event.dataTransfer.setData('text/html',this.outerHTML);
			this.classList.add('dragging');
		}
		function drag(event) {

		}
		function dragend(event) {
			lolight(this);
			this.classList.remove('dragging');
		}

	//	Target

		function dragenter(event) {

		}
		function dragover(event) {
			event.preventDefault();
			event.dataTransfer.dropEffect='move';
			var left=this.getBoundingClientRect().left;
			var right=this.getBoundingClientRect().right;
			if(event.clientX<(left+right)/2) {
				this.classList.add('dragover-before');
				this.classList.remove('dragover-after');
			}
			else {
				this.classList.add('dragover-after');
				this.classList.remove('dragover-before');
			}
		}
		function dragleave(event) {
			lolight(this);
		}
		function drop(event) {
			event.stopPropagation();
			if(element!=this) {
				if(this.classList.contains('dragover-before')) {
					this.insertAdjacentElement('beforebegin',element);
				}
				else if(this.classList.contains('dragover-after')) {
					this.insertAdjacentElement('afterend',element);
				}
			}
			lolight(this);
		}
}