sorting demo

index.html

<div class="sorting-demo">
	<div class="sorting-demo__wrapper">
		<span class="sorting-demo__corner top-left">
			<span data-name="top left" class="sorting-demo__progress"></span>
		</span>
		<span class="sorting-demo__corner top-right">
			<span data-name="top right" class="sorting-demo__progress"></span>	
		</span>
		<span class="sorting-demo__corner bottom-left">
			<span data-name="bottom left" class="sorting-demo__progress"></span>	
		</span>
		<span class="sorting-demo__corner bottom-right">
			<span data-name="bottom right" class="sorting-demo__progress"></span>	
		</span>

		<span class="sorting-demo__sortable one"></span>
		<span class="sorting-demo__sortable two"></span>
		<span class="sorting-demo__sortable three"></span>
		<span class="sorting-demo__sortable four"></span>
	</div>
</div>

main.js

let displaceInstances;
function initSortingDemo(){
	// clear any existing displace instances
	try {
		displaceInstances.forEach(d => d.destroy());
	} catch (e){}

	const circleSize = 40;
	const positions = {};
	const progress = {};

	// setup corner coordinates
	['.top-left', '.top-right', '.bottom-left', '.bottom-right'].map(corner => {
		const el = document.querySelector(corner);
		const position = {
			top: el.offsetTop,
			left: el.offsetLeft,
			// ensure that circle is completely in the box
			bottom: el.offsetTop + el.offsetHeight - circleSize,
			right: el.offsetLeft + el.offsetWidth - circleSize
		};
		const key = corner.replace(/\./, '').replace(/-/, ' ');
		progress[key] = 0;
		return positions[key] = position;
	});
	
	// update corner progress text
	updateCorners();

	// set up circles
	displaceInstances = ['.one', '.two', '.three', '.four'].map(selector => {
		const el = document.querySelector(selector);
		el.style.left = genPos(105, 445) + 'px';
		el.style.top = genPos(105, 245) + 'px';
		el.className = el.className.replace('inactive', '');
		return displace(el, {
			onMouseDown: function(el){
				el.className += ' active';
			},
			onMouseUp: function(el){
				el.className = el.className.replace('active', '');
				checkPosition(el);
			},
		});

		function genPos(min, max){
			return Math.floor(Math.random()*(max-min+1)+min);
		}
	});

	function checkPosition(el){
		const x = el.offsetLeft;
		const y = el.offsetTop;

		Object.keys(positions).forEach(key => {
			const vals = positions[key];

			if ( between(x, vals.left, vals.right) && between(y, vals.top, vals.bottom) ){
				progress[key] = progress[key] + 1;
				updateCorners();

				// disable element
				el.className += ' inactive';
				const d = displaceInstances.find(d => {
					return d.el === el;
				});
				d.destroy();
			}
		});

		function between(val, min, max){
			return val >= min && val <= max;
		}
	}

	function updateCorners(){
		Object.keys(positions).forEach(key => {
			const query =  `[data-name='${key}']`;
			const el = document.querySelector(query);
			el.innerHTML = `Contains: <strong>${progress[key]}</strong>`;
		});
	}
}
initSortingDemo();

style.scss

.sorting-demo {
	width: 600px;
	background: rgba(255, 193, 7, 0.17);
	* {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		box-sizing: border-box;
	}

	&__wrapper {
		height: 400px;
		position: relative;
		border-radius: 2px;
	}
	&__corner {
		width: 100px;
		height: 100px;
		display: inline-block;
		position: absolute;
		background: $c1;
		border: 2px solid $c2;
		border-radius: 2px;

		&.top-left {
			top: 0;
			left: 0;
		}
		&.top-right {
			top: 0;
			right: 0;
		}
		&.bottom-left {
			bottom: 0;
			left: 0;
		}
		&.bottom-right {
			bottom: 0;
			right: 0;
		}
	}
	&__sortable {
		$size: 40px;
		width: $size;
		height: $size;
		display: inline-block;
		border-radius: 99px;
		position: absolute;
		top: 0;
		left: 0;
		cursor: move;
		transition: transform 0.1s ease-out, 
					opacity 0.3s ease-out,
					background 0.3s ease-out;
		border: 4px solid;

		&.active {
			transform: scale(1.1);
			z-index: 5;
			border-style: dotted;
		}
		&.inactive {
			cursor: not-allowed;
			background: $b6 !important;
			border-color: $b5 !important;
		}

		&.one {
			background: #2196f3;
			border-color: #1380d8;
		}
		&.two {
			background: #00BCD4;
			border-color: #03a3b7;
		}
		&.three {
			background: #4CAF50;
			border-color: #3a983e;
		}
		&.four {
			background: #8BC34A;
			border-color: #78ad3b;
		}
	}

	&__progress {
		font-size: 1.3rem;
		width: 100%;
		display: inline-block;
		text-align: center;
		margin-top: 6px;
	}

	&__options {
		margin-top: 1em;
		width: 600px;
	}
}