JSFiddle - React, Tailwind, and code Playground

by will

JavaScript

var css = 'body:not(.engage-drag-enabled) *:hover{box-shadow:inset 0 0 0 2px red !important;}.engage-drag-target{box-shadow:inset 0 0 0 2px green !important; cursor: move!important;}.engage-drag-target * {cursor:move!important;}.engage-drag-kill{position:fixed;top:0; right:0; z-index: 9999; width:50px; height:50px; background:blue;}',
	head = document.getElementsByTagName('head')[0],
	style = document.createElement('style');

style.type = 'text/css';

if( style.styleSheet ){

	style.styleSheet.cssText = css;

}else{

	style.appendChild(document.createTextNode(css));

}

head.appendChild(style);

var $engageDragBody = $('body'),
	$engageDragKill = $('<span class="engage-drag-kill"></span>'),
	$engageDragTarget = false,
	engageDragEnabled = false;

$engageDragBody
	.on('click', function(e){

		if( !engageDragEnabled && !$(e.target).is('.engage-drag-kill') ){

			engageDragEnabled = true;
			$engageDragTarget = $(e.target);

			$engageDragBody.addClass('engage-drag-enabled');
			$engageDragTarget.addClass('engage-drag-target');

			$engageDragKill
				.appendTo($engageDragBody)
				.on('click', function(){

					$engageDragTarget.removeClass('engage-drag-target');
					$engageDragBody.removeClass('engage-drag-enabled');

					engageDragEnabled = false;
					$engageDragTarget = false;

					$engageDragKill.remove();

				});

		}

		e.preventDefault();

	});

$engageDragBody.on('mousedown', '.engage-drag-target', function(e){

	if( engageDragEnabled ){

		var $this = $(this);

		var startX = $this.position().left,
			startY = $this.position().top;

		console.log(e.pageX, e.pageY);

		$this.css({
			top: y,
			left: x
		});

	}

});