JSFiddle - React, Tailwind, and code Playground
HTML
<p>
Eos an invidunt dignissim liberavisse, no paulo alterum vix, mei causae vivendum
te. Discere omittam ea sed. Est ex mutat aeque discere. Omnes tincidunt pro ea.
Mentitum expetenda reprehendunt vis id, duo natum adhuc ut. Malis partiendo id duo,
feugait iudicabit consequuntur at eum.
</p>
<div id="droppable">
<p>
Drop here.
</p>
</div>
<p>
Ea eam audire antiopam, agam consulatu patrioque no nec. Sea simul insolens ne,
vero scribentur duo ut. Te mel dico choro virtute. Mel ex sumo omnes.
</p>
<p>
Mel invenire consetetur ad, id vel apeirian liberavisse. Ea amet probatus vituperata
per, nec te ullum graece. Populo prodesset ne vel, te veri intellegebat eos. Et
nullam facilis definiebas eum, ad qui aeterno consequat. Mei no tantas primis facete,
cu est prima sanctus habemus.
</p>
<div id="draggable" >
<p>Drag me to my target</p>
</div>
CSS
#draggable,.draggable
{
position: absolute;
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px;
border: 1px solid #DDDDDD;
color: #333333;
background: #F2F2F2;
cursor: move;
z-index:10;
}
#droppable
{
width: 150px;
height: 150px;
/*padding: 0.5em;*/
float: left;
/*margin: 10px;*/
border: 1px solid #E78F08;
color: #FFFFFF;
font-weight: bold;
background: #F6A828;
overflow: hidden;
}
JavaScript
var $=function(str){
var div=document.createElement('div')
div.innerHTML=str;
return div.firstChild;
}
function id(id){
return document.getElementById(id)
}
id('draggable').style.left =id('droppable').offsetWidth+'px'
id('draggable').style.top = id('droppable').offsetTop+'px'