JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<div id="test" class="drawing-container" ></div>

CSS

.drawing-container{
    width: 200px;
    height: 600px;
    padding: 0;
    margin: 0;
    border-width:1px;
    border-color:#000;
    border-style:solid;
}

JavaScript

var paper = Raphael("test", 200, 600);
var isMouseDown = false;
var fromX, fromY;
var toX, toY;
var line;

var dragArr = ['1','2','3','4','5'];
var dropArr = ['4','1','5','2','3'];
var dragObjects = [];
var dropObjects = [];

function init(){
    var vGap = 50 + 30;
    var dragX = 10;
    var dropX = 200 - 30 -10;
    var dragY;
    var dragObject;
    var dropObject;
    
	for(var index = 0; index < dragArr.length; index++){
    	dragObject = {};
        dragY = vGap*index + 50;
        dragObject.ui = drawDrag(dragX, dragY);
        dragObject.id = dragArr[index];
        dragObjects.push(dragObject);
    }
    
    for(index = 0; index < dragArr.length; index++){
    	dropObject = {};
        dragY = vGap*index + 50;
        dropObject.ui = drawDrop(dropX, dragY);
        dropObject.id = dropArr[index];
        dropObjects.push(dragObject);
        
    }
}

function drawDrop(x, y){
	var width = 30;
    var height = 30;
    var ui = paper.rect(x, y, width, height).attr({"fill":"red","stroke":"white"});
    return ui;
}

function dragMouseDown(event, ui){
	console.log(ui)
}

function dragMouseUp(event, ui){
    
	//console.log(ui)
}

function drawDrag(x, y){
	var width = 30;
    var height = 30;
    var ui = paper.rect(x, y, width, height).attr({"fill":"white","stroke":"red"});   
    ui.mousedown(function(event){
    	dragMouseDown(event, ui);
    })   
    ui.drag(drag_move(), drag_start, drag_up);
        
   /* ui.mouseup(function(event){
    	dragMouseUp(event, ui);
    })*/ 
    return ui;
}

function drag_start(e) {
        this.ox = this.attr("x");
        this.oy = this.attr("y");
    };
    

    //Now here is the complicated bit
    function drag_move() {
        return function(dx, dy) {
            
            //default position, treat drag and drop as normal
            if (this.attr("rotPos") == 0) {
              this.attr({x: this.ox + dx, y: this.oy + dy});
           }
    };
    
function drag_up(e) {
       alert(this.ox);
 }

function...