JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.6.0/mootools-more-compressed.js"></script>
<div id="drag"></div>

<div id="container"></div>

CSS

body {
	background-color:		#333;
}
#container {
	margin-left: 			100px;
}
#container > div {
	width:					30px;
	height:					30px;
	background-color:		#888;
	position: absolute;
	border-radius:			50px;
	-moz-border-radius:		50px;
	-webkit-border-radius:	50px;
	opacity:				0.75;
}
#drag {
	background-color:		rgba(255, 255, 255, 0.1);
	left:					600px;
	width: 					298px;
	height: 				298px;
	border:					1px solid rgba(255, 255, 255, 0.75);
	z-index: 				1000;
}
#container > div.overlap0 {
} 
#container > [class*='overlap0.'] {
	background-color:		#000;
}
#container > div.overlap1 {
	background-color:		#FFF;
}

JavaScript

function $random(min, max) {
	return Number.random(min, max);
}

function $type(object) {
	return typeOf(object);
}

// Rasmus Fløe 2009

var Detector = new Class({});


Detector.effector = new Class({
	
	Implements: [Options],
	
	options: {
		element:	null,
		intersect:	null,
		proximity:	null,
		type:		'rect' // circle, rect, mouse
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.groups = this.options.groups || [];
		if (this.options.element) {
			this.element = this.options.element;
			this.set();
		}
		else if (this.options.type=='mouse') {
			window.addEvent('mousemove', function(e){
				this.rect = {x: e.page.x, y: e.page.y};
				this.check();
			}.bind(this));
		}
		if (window.console) {
			console.log(this);
		}
	},
	
	check: function(){
		if (this.options.type=='rect') {
			this.set();
		}
		this.groups.each(function(group){
			group.check(this);
		}, this);
	},
	
	set: function(e){
		switch(this.options.type){
			case 'mouse':
				this.rect = {x: e.page.x, y: e.page.y};
				break;
			case 'rect':
			default:
				this.rect = this.element.getCoordinates();
				this.rect.right--;
				this.rect.bottom--;
				if (this.options.proximity) {
					this.rect.x = this.rect.left + this.rect.width/2;
					this.rect.y = this.rect.top + this.rect.height/2;
				}
				break;
		}
	}

});
	
Detector.group = new Class({

	Implements: [Options],
	
	options: {
		/*
		onDetect: $empty,
		onIntersect: $empty,
		onProximity: $empty,
		*/
	},
	
	initialize: function(elements, options){
		this.setOptions(options);
		this.elements = $$();
		this.rects = [];
		this.rect = {
			top:	Number.POSITIVE_INFINITY,
			left:	Number.POSITIVE_INFINITY,
			bottom:	Number.NEGATIVE_INFINITY,
			right:	Number.NEGATIVE_INFINITY
		};
		elements.each(this.add.bind(this));
	},
		
	check: function(effector){
		if (effector.options.proximity && this.options.onProximity) {
			var proximityRect =...