jquery:拖动而不单击

我正在尝试设置以下页面,其中:

如果你点击按钮,你可以看到一个div。
如果单击div,可以看到下一个div。
如果你移动按钮,就不会有点击(期望的行为)

我遇到的问题是,如果你移动div,下一个div就会出现-这不是我想要的。“下一个div”不应在拖动事件完成后显示。

这是我的代码:

$(function() {
  $("#button").draggable({
    stack: 'div',
    containment: "body"
  });
});

$('#button').on('mouseup', function() {
  if (!$(this).hasClass('ui-draggable-dragging')) {
    // click function
    $("#content").toggle();
  }
});

$(function() {
  $("#content").draggable({
    stack: 'div',
    containment: "body"
  });
});

let containers = $('.trip').hide();
let firstContainer = containers.first().show();

containers.on('click', function() {
  //Get current element and next sibling
  let elem = $(this);
  let next = elem.next('.trip');

  //Does sibling exist?
  if (next.length) {
    next.show();
  } else {
    firstContainer.show();
  }
  elem.hide();
});

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  background-color: grey;
}

#button {
  width: 100px;
  height: 100px;
  background-color: cyan;
}

#content {
  display: none;
  cursor: all-scroll;
  top: 10%;
  left: 10%;
  position: absolute;
}

.trip {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
}

<div id="button">Button</div>

<div id="content">
  <div class="trip">div 1</div>
  <div class="trip">div 2</div>
  <div class="trip">div 3</div>
</div>

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

有办法解决这个问题吗?:)
(一个可能的问题是纯javascript与jquery混合在一起)
谢谢