JSFiddle - React, Tailwind, and code Playground

HTML

<p>Handlers attached to the right things.</p>

<p>Handlers all attached to this p.</p>

CSS

p {
    width: 20em;
    line-height: 5em;
    text-align: center;
    color: white;
    background: black;
    position: relative;
    top: 0;
    left: 0;
}

JavaScript

$('p:first').mousedown(function(startE) {
    var p = $(this), startTop = parseInt(p.css('top')), startLeft = parseInt(p.css('left'));
    $(document).mousemove(function(e) {
        p.css('top', startTop+e.clientY-startE.clientY);
        p.css('left', startLeft+e.clientX-startE.clientX);
    }).one('mouseup', function(e) {
        $(this).unbind('mousemove');
    });
});
$('p:last').mousedown(function(startE) {
    var p = $(this), startTop = parseInt(p.css('top')), startLeft = parseInt(p.css('left'));
    p.mousemove(function(e) {
        p.css('top', startTop+e.clientY-startE.clientY);
        p.css('left', startLeft+e.clientX-startE.clientX);
    }).one('mouseup', function(e) {
        $(this).unbind('mousemove');
    });
});
$(document).bind('selectstart', false);