JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<div id="drag1">Drag 1</div>
<div id="drag2">Drag 2</div>

<div id="drop1">Drop 1</div>
<div id="drop2">Drop 2</div>

CSS

div {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    background: #eee;
    padding: 5px;
    position: absolute;
}
#drag1, #drag2 {
    top: 20px;
}
#drop1, #drop2 {
    top: 200px;
}
#drag1, #drop1 {
    left: 30px;
}
#drag2, #drop2 {
    left: 200px;
}
.whatever {
    background: lime;
}

JavaScript

//drag and drop
$.fn.drag = function(a, b) {
    var currentDrag = null;
    $(this).each(function() {
        function startDrag(e) {
            currentDrag = this;
            $('*').one('mouseup', function(e) {
                if (!currentDrag) return;
                for (var target in targets) {
                    var x = targets[target];
                    if (x.activeClass) {
                        $(target).removeClass(x.activeClass);
                    }
                    if ($(target)[0] == this) {
                        x.drop(currentDrag, this);
                        e.stopPropagation();
                    }
                }
                currentDrag = null;
            });
            for (var target in targets) {
                var ac = targets[target].activeClass
                if (ac) {
                    $(target).addClass(ac);
                }
            }
        };
        var targets = null;
        if(b) {
            targets  = b;
            $(this).on('mousedown', a, startDrag);
        }else{
            targets  = a;
            $(this).mousedown(startDrag);
        }
    });
}

$('#drag1').drag({
        '#drop1': {
            drop: function(a, b) {
                console.log(a, b);
            },
            activeClass: 'whatever'
        }
});