JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer_canvas"><div id="canvas"><div id="marker">&nbsp;</div><div id="marker2"></div></div></div>

CSS

#canvas { 
 position: relative;
 width: 500px; 
 height: 500px;
 float: left;
 border: 1px dashed #000000;
 }
 
 #outer_canvas { 
 position: relative;
 width: 200px; 
 height: 200px;
 border: 2px solid #000; 
 float: left;
 margin: 10px;
overflow: hidden;
 }


#marker {
 width:25px;
 height:25px;   
 background: #000000;
}

#marker2 {
 width:25px;
 height:25px;   
 background: #EE0000;
}

JavaScript

$( "#canvas" ).draggable();
$( "#marker" ).draggable();