/**
 * Some styles for the demo
 */
#zone1,
#zone2,
#zone3 {
  position: absolute;
  width: 250px;
  height: 250px;
  border: 1px solid #00f;
}
#zone1.hovered,
#zone2.hovered,
#zone3.hovered {
  border: 1px solid #008000;
}
#zone1 {
  left: 100px;
  top: 10px;
}
#zone2 {
  left: 500px;
  top: 10px;
}
#zone3 {
  top: 280px;
  width: 100px;
  height: 1000px;
}
.pin {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}
.pin:not(.ui-draggable-dragging) {
  transition: 0.25s;
}
.pin.w2 {
  width: 100px;
}
.pin.w4 {
  width: 200px;
  height: 100px;
}