JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id='container'>
<div id="flashcontent">bewegt sich nur hier</div>
<div id="show">Show me</div>
</div>
CSS
#flashcontent{
top:50px;
left:20px;
width: 400px;
height: 250px;
position: relative;
background-color:green;
}
.draggable p {
width: 100px;
position: absolute;
top: 0;
left: 100px;
}
#container {
height: 800px;
background: blue;
}
JavaScript
var d = $('#show').dialog({
position: [$("#flashcontent").offset().left, $("#flashcontent").offset().top],
modal:true,
title:"Hello"
});
d.parent().draggable({
containment: "#flashcontent"
});
$(".ui-widget-overlay").width($("#flashcontent").width());
$(".ui-widget-overlay").height($("#flashcontent").height());
$(".ui-widget-overlay").offset({ top:$("#flashcontent").offset().top, left:$("#flashcontent").offset().left});