SOURCE

$(function() {
  $('.circle').pep({
    useCSSTranslation: false,
    constrainTo: 'parent',
    overlapFunction: false,
    droppable: '.coops',
    drag: function(ev, obj) {},
    revert: true,
    revertIf: function(ev, obj) {
      return false;
    }
  });
});

<section class="wrap">
  <div class="links">
    <a href="javascript:;">
      首页
    </a>
    <a href="javascript:;">
      场景一
    </a>
    <a href="javascript:;">
      场景二
    </a>
    <a href="javascript:;" class="active">
      场景三
    </a>
  </div>
  <div class="circle-content">
    <div class="circle" id="circle01">
      鸡蛋1号
    </div>
    <div class="circle" id="circle02">
      鸡蛋2号
    </div>
    <div class="circle" id="circle03">
      鸡蛋3号
    </div>
    <div class="circle" id="circle04">
      鸡蛋4号
    </div>
    <div class="circle" id="circle05">
      鸡蛋5号
    </div>
    <div class="coop-content">
      <div class="coops" id="coop01">
        鸡窝1号
      </div>
      <div class="coops" id="coop02">
        鸡窝2号
      </div>
      <div class="coops" id="coop03">
        鸡窝3号
      </div>
      <div class="coops" id="coop04">
        鸡窝4号
      </div>
      <div class="coops" id="coop05">
        鸡窝5号
      </div>
    </div>
  </div>
</section>

.wrap {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.links {
  height: 3.5rem;
  display: block;
}

.links a {
  padding: 1rem;
  display: inline-block;
  text-decoration: none;
  color: #1565c0;
}

.links a.active {
  background: #1565c0;
  color: #fff;
}

.circle-content {
  flex: 1;
  margin: 1rem;
}

.circle-content .circle {
  display: block;
  position: relative;
  top: 1rem;
  width: 4.5rem;
  height: 4.5rem;
  background: #ff8800;
  border-radius: 100%;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  line-height: 4.5rem;
  text-align: center;
  z-index: 1;
}

.circle-content #circle02 {
  -webkit-transform: translateY(120%);
  -moz-transform: translateY(120%);
  -ms-transform: translateY(120%);
  -o-transform: translateY(120%);
  transform: translateY(120%);
}

.circle-content #circle03 {
  -webkit-transform: translateY(240%);
  -moz-transform: translateY(240%);
  -ms-transform: translateY(240%);
  -o-transform: translateY(240%);
  transform: translateY(240%);
}

.circle-content #circle04 {
  -webkit-transform: translateY(360%);
  -moz-transform: translateY(360%);
  -ms-transform: translateY(360%);
  -o-transform: translateY(360%);
  transform: translateY(360%);
}

.circle-content #circle05 {
  -webkit-transform: translateY(480%);
  -moz-transform: translateY(480%);
  -ms-transform: translateY(480%);
  -o-transform: translateY(480%);
  transform: translateY(480%);
}

.coop-content {
  position: absolute;
  top: 0;
  right: 0;
}

.coops {
  width: 5rem;
  height: 5rem;
  background: #fff;
  border: 3px solid #ff8800;
  margin-bottom: 1rem;
  z-index: 0;
}