JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="svg"></div>
<button id="checkAnswer">Check Answer</button> <button id="reset">Reset</button> <button id="answer">Answer Key</button>

CSS

body {
    padding:10px;
    background-color:#eee;
}
#svg {
    background-color: white;
    width:300px;
    height:300px;
    border:solid;
    border-width:1px;
}
#mouseStart, #mouseMove, #mouseEnd {
    background-color: white;
    width:20px;
    height:30px;
    float:left;
    margin-left:25px;
    padding:10px;
    font-size:15px;
    margin-top:10px;
}

JavaScript

$(document).ready(function () {
    var svg = document.getElementById("svg");
    var c = {
        width: svg.offsetWidth,
        height: svg.offsetHeight,
        center: {
            x: svg.offsetWidth / 2,
            y: svg.offsetHeight / 2
        }
    };
    var drags = [{answerKey:1},{answerKey:2},{answerKey:3}];
    var drops = [{answerKey:1},{answerKey:2},{answerKey:3}];
    var vgap = 50;
    var padding = 10;
    var width = 20;
    var height = 20;
    var canvasWidth = 300;
    var cornerRadius = 5;
    var dragInitialStyle = {fill: "#0000ff", stroke: "none"}
    var dragDraggingStyle = {fill: "#ff0000", stroke: "none"}; 
    var dragDroppedStyle = {fill: "#00ff00", stroke: "none"};
    var dragHolderStyle = {fill: "#0000ff", stroke: "none"};
    var dropStyle = {fill: "#ccc", stroke: "none"};
    
    var paper;
    var set;
    
    draw();
    
    function draw(){
        paper = Raphael(svg, canvasWidth, 300);
    	set = paper.set();
    	drawDrags();
        drawDrops();
    	set.drag(dragMove, dragStart, dragEnd)
    }
    
    function drawDrags(){
        var dragCount = drags.length;
        var drag;
        var dragHolder;
        var verticalPosition=padding;
    	for(var index = 0; index < dragCount; index++){
            verticalPosition = index * (padding + vgap) + padding;
        	drag = paper.rect(padding, verticalPosition, width, height, cornerRadius);
            dragHolder = paper.rect(padding, verticalPosition, width, height, cornerRadius);
            drag.toFront();
            
            dragHolder.attr(dragHolderStyle),
            
            drag.data("index",index);
            drag.attr(dragInitialStyle);
            set.push(drag);
            
            drags[index].drag = drag;
            drags[index].inditialPosition = {x:padding, y:verticalPosition};
            drags[index].line = paper.path("M " + padding + "," + verticalPosition + " L " + padding + ", "  + verticalPosition);
           ...