JSFiddle - React, Tailwind, and code Playground

by aljordan82

HTML

<div id="board" style=""> Drop items on me</div>

<div class="container ">

    <div class="char">0</div>
    <div class="char">1</div>    
    <div class="char">2</div>    
    <div class="char">3</div>    
    <div class="char">4</div>
    <div class="char">5</div>
    <div class="char">6</div>
    <div class="char">7</div>
    <div class="char">8</div>
    <div class="char">9</div>
    <div class="char">/</div>
    <div class="char">*</div>
    <div class="char">-</div>
    <div class="char">+</div>
    <div class="char">=</div>
    <div class="char">%</div>
    <div class="char">-</div>
    <div class="char">+</div>
</div>

CSS

.custom-state-active { background: #eee; }




body { background:#fff; }
#board {
    width:100%;
    height:400px;
    background-color:#eee;
    color:#444;
}
.container {
    width: 500ps;
    border: 1px solid black;
    height: 500px;
}

.char , .bChar{    
    border: 1px solid black;
    display: inline-block;
    width: 50px;
    height: 50px;
    font-size: 40px;
    text-align: center;
 }

.super { font-size: 10px;}
.bChar { border: none;}
.isActive { outline:1px solid red;}

JavaScript

/*!
 * jQuery UI Touch Punch 0.2.3
 *
 * Copyright 2011–2014, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 */
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
	$(document).ready(function(){
        
        $("#board").on('mousedown', function(){
            return false
        })            
        
        var sizeClasses = ['super', '']
        
		$(".char").draggable({helper:'clone'})
        .on('click', function(){
            $(this).toggleClass('super')
                    
        });  

		$("#board").droppable({
			accept: ".char",
			drop: function(event,ui){
                debugger
                
					console.log("Item was Dropped");
                    $dr = $(ui.draggable).clone()
                    $dr.css({position: 'absolute', left:ui.offset.left, top: ui.offset.top })
                        .removeClass('char')
                  ...