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://www.chessmangler.com/images/chessPieces/Chess.Merida/bp.png" />
        </td>
        <td id="two" class="thing chessodd ui-droppable">
            <img  id="whitePawn" class="piece ui-draggable" src="http://www.chessmangler.com/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>
    </tr>
</table>
<br/>
<a href="#">Toggle droppability</a>

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;

$("a").bind("click", function(event) {
    event.preventDefault();
    acceptable = !acceptable;
});


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

        $(dropSelector).droppable({
            accept: function(el) {
                return acceptable 
            },
            over: function() { //fires only when acceptable = true
                //alert("hello"); 
                //acceptable = !acceptable; 
                //alert("acceptable is now " + acceptable);                        
            }, 
            drop: function(event, ui) {
               
                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
           ...