JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<body>
<header>Header</header>
<div id="page_wrapper">
<section id="s1"><div class="todrag">Button 1</div></section>
<section id="s2"><div class="todrag">Button 2</div></section>
<section id="s3"><div class="todrag">Button 3</div></section>
<section id="s4"><div class="todrag">Button 4</div></section>
</div>
</body>

CSS

body {
  margin: 0;
}
header {
  height: 25px;
  background: #CFC;
}
#page_wrapper {
  position: absolute;
  overflow: auto;
  top: 25px;
  bottom: 0;
  left: 0;
  right: 0;
}
section {
  position:relative;
  height:50%;
  border:1px solid #44F;
}
.todrag {
  background:#AAA;
  width:100px;
  height:25px;
  text-align:center;
}

JavaScript

$('.todrag').draggable({
    helper:'clone',
    zIndex:9999
});