JSFiddle - React, Tailwind, and code Playground

by Russ Walters

HTML

<div id="container">
  <div class="element" id="queue"></div>
	<div style="height:5px; width:100%;" class="seperator" ondrag="resizeQueue()">
	
	</div>
	 <div class="element"></div>
	 <div style="height:3px; width:100%;">
	
	</div>
	 <div class="element"></div>

CSS

#container {
  height: 500px;
  width: 600px;
  background-color: white;
  border: 1px solid black;
  position: relative;
  margin: 0px;
}
.seperator{
	background-color:black;
}
.element {
  width: 250px;
  height: 160px;
  background-color: lightblue;
  border: 1px solid black;
	min-heiht:25;
}

JavaScript

$(".seperator").draggable({
  containment: "#container",
	handels:'n,s'
});

function resizeQueue(){
var topDiv = $('#queue').get(0).id;
alert(topDiv);
}