JSFiddle - React, Tailwind, and code Playground

JavaScript

paper = Raphael(0, 0, 500, 500);
var c1 = paper.circle(50, 50, 20).attr({
    'fill': 'red'
}),
    c2 = paper.circle(100, 100, 20).attr({
    'fill': 'green'
});


    start = function() {
        this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
        this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
        this.attr({
            opacity: 1
        });

        // Save the dragged object in global namespace.
        window.someVar = this;
    },

    move = function(dx, dy) {
        var att = this.type == "rect" ? {
            x: this.ox + dx,
            y: this.oy + dy
        } : {
            cx: this.ox + dx,
            cy: this.oy + dy
        };
        this.attr(att);
    },
    up = function() {
        this.attr({
            opacity: .5
        });
    // Clear the dragged element global namespace
    delete window.someVar;
    };

c1.drag(move,start,up).onDragOver( function(a) { collide(a);});
c2.drag(move,start,up).onDragOver( function(a) { collide(a);});

function collide(a) {
  hitFill = a.attr("fill");
  dragFill = window.someVar.attr("fill");
  alert("A "+dragFill+" circle was dragged into a "+hitFill+" circle");
};