JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div style="position: relative; background-color: #ff0; width: 140px; height: 140px; border: 1px solid #ccc;">
   <div id="draggableArea">

   </div>
</div>

CSS

#draggableArea {
   position: absolute;
   width: 100px;
   top: 0px;
   bottom: 0px;
   background-color: #00000066;

   z-index: 100000;
   cursor: grab;
}

JavaScript

var DragInterface = (function() {
	return {
		isDragging: false,
		startingPosition: [],
		_MouseDown: function(evt) {
			DragInterface.isDragging = false;
			startingPosition = [evt.pageX, evt.pageY];
		},
		_MouseMove: function(evt) {
			if (DragInterface.startingPosition.length > 0 && !(evt.pageX === DragInterface.startingPositionPosition[0] && evt.pageY === DragInterface.startingPosition[1])) {
				DragInterface.isDragging = true;
			}
		},
		_MouseUp: function(evt) {
			if (DragInterface.isDragging) {
				console.log("DRAGGING!");
			}
			DragInterface.isDragging = false;
			startingPosition = [];
		}
	};
})();


var draggableArea = document.querySelector("#draggableArea");

draggableArea.addEventListener("drop", (evt) => {
	console.log("DROP ");
});
draggableArea.addEventListener("drag", (evt) => {
	DragInterface._MouseMove(evt);
	console.log("DRAG ", evt);
});
draggableArea.addEventListener("dragout", (evt) => {
	console.log("DRAG OUT ");
});
draggableArea.addEventListener("dragover", (evt) => {
	console.log("DRAG OVER ");
});
draggableArea.addEventListener("dragstart", (evt) => {
	DragInterface._MouseDown(evt);
	console.log("DRAG START ", evt);
});
draggableArea.addEventListener("dragend", (evt) => {
	DragInterface._MouseUp(evt);
	console.log("DRAG END ", evt);
});