DragNDrop.js

"use strict";

class DragNDrop {
	constructor( el, opt = {} ) {
		this._clickedElem =
		this._draggedElem =
		this._dragoverBCR =
		this._dragoverElem = null;
		this._handleSelector = opt.handleSelector || "*";
		el.addEventListener( "mousedown", this._onmousedown.bind( this ) );
		el.addEventListener( "dragstart", this._ondragstart.bind( this ) );
		el.addEventListener( "dragover", this._ondragover.bind( this ) );
		el.addEventListener( "dragend", this._ondragend.bind( this ) );
	}

	// events:
	_onmousedown( e ) {
		this._clickedElem = e.target;
	}
	_ondragstart( e ) {
		if ( this._clickedElem.matches( this._handleSelector ) ) {
			this._draggedElem = e.target;
			e.dataTransfer.effectAllowed = "move";
			e.dataTransfer.setData( "text", "" );
			setTimeout( () => this._draggedElem.classList.add( "DragNDrop-dragging" ), 100 );
		} else if ( !window.getSelection().toString() ) {
			e.preventDefault();
		}
	}
	_ondragover( e ) {
		if ( this._draggedElem ) {
			const elOver = e.target.closest( "[draggable]" );

			if ( elOver !== this._dragoverElem ) {
				this._dragoverElem = elOver;
				this._dragoverBCR = elOver && elOver.getBoundingClientRect();
			}
			if ( elOver ) {
				const bcr = this._dragoverBCR;

				e.clientY < bcr.top + bcr.height / 2
					? elOver.before( this._draggedElem )
					: elOver.after( this._draggedElem );
				e.preventDefault();
			}
		}
	}
	_ondragend( e ) {
		if ( this._draggedElem ) {
			this._draggedElem.classList.remove( "DragNDrop-dragging" );
			this._draggedElem = null;
			this._clickedElem = null;
		}
	}
};