JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="draggable" class="draggable ui-widget-content">
    <p class="ui-widget-header">I can be dragged only by this handle</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
    <p>You can drag me around…</p>
    <p class="ui-widget-header">…but you can't drag me by this handle.</p>
</div>

CSS

#draggable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    float: left;
    margin: 0 10px 10px 0;
}
#draggable p {
    cursor: move;
}
#draggable2 {
    height: 200;
    width: 200;
    padding: 0.5em;
    float: left;
    margin: 0 10px 10px 0;
}

JavaScript

var top, left;

$(".draggable").draggable({
    handle: "p",
    start: function (event, ui) {
        var height = ui.helper.height();
        var width = ui.helper.width();
        var top = Math.floor(height / 2);
        var left = Math.floor(width / 2);
        $(".draggable").draggable("option", "cursorAt", {
            left: left,
            top: top
        });

    }
});