JSFiddle - React, Tailwind, and code Playground
HTML
<div id="draggable"></div>
<br /><br /><br />
<div id="dialog"></div>
<button id="btnShow">Show</button>
CSS
#draggable{
width: 100px;
height: 100px;
background-color: red;
}
#dialog{
width: 100px;
height: 100px;
background-color: green;
display: none;
}
JavaScript
$("#draggable").draggable({
cursorAt: { top: 0, left: 0 }
});
$("#dialog").dialog({
autoOpen: false,
title: "Dialog",
cursorAt: { top: 0, left: 0 }
});
$("#myDialog").dialog("widget").draggable("option", "cursorAt", { top: 0, left: 0 });
$("#btnShow").click(function() {
$("#myDialog").dialog("open");
});