JSFiddle - React, Tailwind, and code Playground

HTML

<p id="a">hello</p>
<p id="b">world</p>

CSS

p {
    margin: 5px;
    padding: 10px;
    color: #FFF;
    background-color: #222;
}

JavaScript

jQuery.event.special.drag = {
    // invoked each time we bind drag to an element
    add: function(obj) {
        var originalHandler = obj.handler;

        obj.handler = function(event) {
            var el = jQuery(this);

            if(el.data('mousePressed')) {
                return originalHandler.apply(this, arguments);
            }
        };
    },

    // invoked only the first time drag is bound per element
    setup: function(data, namespaces) {
        var el = jQuery(this);

        el.data('mousePressed', false);
        el.bind('mousedown', function() {
            jQuery(this).data('mousePressed', true);
        });
        jQuery(document).bind('mouseup', function() {
            el.data('mousePressed', false);
        });
        el.bind('mousemove', jQuery.event.special.drag.handler);
    },

    // invoked when all drag events are removed from element
    teardown: function(namespaces) {
        var el = jQuery(this);

        jQuery.removeData(this, 'mousePressed');
        el.unbind('mousedown');
        el.unbind('mouseup');
    },
    
    // our wrapper event is bound to "mousemove" and not "bind"
    // change event type, so all attached drag handlers are fired
    handler: function(event) {
        event.type = 'drag';
        jQuery.event.handle.apply(this, arguments);
    }
};
    
$("p#a").bind("drag", function() {
    console.log("dragged: A");
});

$("p#b").bind("drag", function() {
    console.log("dragged: B");
});

console.log($("p").data("events"));