JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<a href="javascript:var mousemove = function(v) { v.target.rcObject.setProperty('x',v.target.rcObject.mashedProperties.x + (v.x - parseInt(v.target.dataset.positionx))); v.target.rcObject.setProperty('y',v.target.rcObject.mashedProperties.y + (v.y - parseInt(v.target.dataset.positiony))); v.target.textContent = ['x: ', v.target.rcObject.mashedProperties.x, ', y: ', v.target.rcObject.mashedProperties.y].join(''); if(isNaN(v.target.dataset.positionx) || isNaN(v.target.dataset.positiony)) debugger; v.target.dataset.positionx = v.x; v.target.dataset.positiony = v.y; }; var mousedown = function(v) { if(v.target.rcObject === undefined) return; v.target.dataset.positionx = v.x; v.target.dataset.positiony = v.y; v.target.textContent = ['x: ', v.target.rcObject.pixiObject.position.x, ', y: ', v.target.rcObject.pixiObject.position.y].join(''); v = v.target; v.addEventListener('mousemove', mousemove); v.addEventListener('mouseup', function() { v.removeEventListener('mousemove', mousemove); }); }; var events = function(v) { if(v.id.toLowerCase().indexOf('root') !== -1) return; v.addEventListener('mouseover', function(e) { v.classList.add('active'); v.addEventListener('mousedown', mousedown); }); v.addEventListener('mouseout', function(e) { v.classList.remove('active'); v.removeEventListener('mousedown', mousedown); v.removeEventListener('mousemove', mousemove); }); }; [].slice.call(document.querySelectorAll('.rc_button')).forEach(events); [].slice.call(document.querySelectorAll('.rc_sprite')).forEach(events); [].slice.call(document.querySelectorAll('.rc_container')).forEach(events);">Rapid Mover</a>

CSS

/* Optional CSS to add to base.css file */

.rc_button, .rc_container, .rc_sprite{
	font-size: 0;
	color: transparent;
	border: none;
	background: none;
	font-family: Arial, sans-serif
}

.rc_button.active{
	border: 2px solid blue;
	font-size: 32px;
	color:white;
	background: rgba(0,0,255, 0.5);
}

.rc_container.active{
	border: 2px solid lime;
	font-size: 32px;
	color:white;
	background: rgba(0,255,0, 0.5);
}

.rc_sprite.active{
	border: 2px solid red;
	font-size: 32px;
	color:white;
	background: rgba(255, 0, 0, 0.5);
}