JSFiddle - React, Tailwind, and code Playground

by KevinGabbert

HTML

<table>
    <tr>
        <td id="one" class="thing chesseven ui-droppable">
            <img id="blackPawn" class="piece ui-draggable" src="http://chessmangler.azurewebsites.net/images/chessPieces/Chess.Merida/bp.png" />
        </td>
        <td id="two" class="thing chessodd ui-droppable">
            <img  id="whitePawn" class="piece ui-draggable" src="http://chessmangler.azurewebsites.net/images/chessPieces/Chess.Merida/wp.png" />            
        </td>
        <td id="three" class="thing chesseven ui-droppable"></td>
        <td id="four" class="thing chessodd ui-droppable"></td>
        <td id="five" class="thing chesseven ui-droppable"></td>
        <td id="six" class="chessodd"></td>
    </tr>
</table>
<br/>

CSS

.chessodd 
{
    background-color: #999999;
    width: 70px;
    height: 70px;
    padding: 0;
    text-align: center;
}
    
.chesseven {
    
    background-color: #CCC;
    width: 70px;
    height: 70px;
    padding: 0;
    text-align: center;
}

JavaScript

//Success means that you pick up one pawn, and hover it over the other. an alert will pop up telling you the ID of the pawn being hovered OVER.
var acceptable = false;


var _thisSpot;
var Spot = ({
    AddSpotEvents: function(dropSelector) {

        $(dropSelector).droppable({
            over: function() { //this fires only when acceptable = true?
                //alert("over"); 
                
                $(this).removeClass("ui-droppable");
                $(this).removeClass("thing");
                
                //acceptable = !acceptable; //How can I set this here?                   
            }, 
            drop: function(event, ui) {
               //alert("drop"); 
                var $spot = $(this);
                var draggedPiece = ui.draggable.get(0);
                var thisID = "#" + draggedPiece.id;
                var thisSRC = draggedPiece.src;
                
                //alert('dragged: ' + thisID + ' spot: ' + $spot.attr('id')); 

                ui.draggable.remove(); //Got what we need, now delete previous img.
                _newPiece.CreatePieceIMG(thisID, thisSRC, $spot);

                board.AddDragAndDrop('#' + _draggedPieceID, thisID);
            }
        });
    }
});

var _thisPiece;
var Piece = ({
    CreatePieceIMG: function(pieceID, src, spot) {
        spot.append(this.PieceIMG_HTML(pieceID, src));
    },
    PieceIMG_HTML: function(pieceID, src) {
        return '<img id="' + pieceID.substring(1) + '" class="thing piece ui-widget-content ui-draggable" src="' + src + '" />';
    },
    AddPieceEvents: function(dragSelector) {

        $(dragSelector).draggable({
            revert: 'invalid',
            drag: function(event, ui) {

                var helper = ui.helper;
                var helperID = helper.attr('id'); //data
                _draggedPieceID = helperID; //cheat.  this data needs to be stored elsewhere
            
            },
            stop: function(event, ui) {
               ...