多次单击事件jquery后将div重置为原始位置

Question

我遇到这样的问题：Video

我想多次单击后将div重置为原始位置。

$(document).ready(function() {
  var mousemove_ok = true;
  var that;
  $(".parent").click(function() {
    if (mousemove_ok) {
      that = this;
      if ($(this).children().length > 0) {
        $(document).mousemove(function(e) {
          $(that).children().css({
            "position": "absolute",
            "top": e.pageY + 10,
            "left": e.pageX + 10
          });
          $(document).mouseup(function(e) {
            var container = $(".parent");
            // if the target of the click isn't the container nor a descendant of the container
            if (!container.is(e.target) && container.has(e.target).length === 0) {
              $(that).children().css({
                "position": "unset"
              });
              $(document).off('mousemove');
              mousemove_ok = true;
              $(document).off('mouseup');
            } else {
              mousemove_ok = false;
              $(document).off('mouseup');
            }
          });
        });
      } else {}
    } else {
      if ($(this).children().length > 0) {
        // swap - coding

        $(this).append($(that).children());
        $(this).children().eq(1).css("position", "unset");
        $(document).off('mousemove');
        that = this;
        $(document).mousemove(function(e) {
          $(that).children().first().css({
            "position": "absolute",
            "top": e.pageY + 10,
            "left": e.pageX + 10
          });
          $(document).mouseup(function(e) {
            var container = $(".parent");
            // if the target of the click isn't the container nor a descendant of the container
            if (!container.is(e.target) && container.has(e.target).length === 0) {
              $(that).children().css({
                "position": "unset"
              });
              $(document).off('mousemove');
              mousemove_ok = true;
              $(document).off('mouseup');
            } else {
              mousemove_ok = false;
              $(document).off('mouseup');
            }
          });
        });

        mousemove_ok = true;
      } else {
        if ($(that).children().length > 1) {
          $(this).append($(that).children().first());
        } else {
          $(this).append($(that).children());
        }
        $(this).children().css({
          "position": "unset"
        });
        $(document).off('mousemove');
        mousemove_ok = true;
      }
    }
  });
})

.parent {
  float: left;
  height: 50px;
  width: 50px;
  border: 1px solid black;
}

#child1 {
  height: 50px;
  width: 50px;
  background-color: khaki;
}

#child2 {
  height: 50px;
  width: 50px;
  background-color: aqua;
}

#child3 {
  height: 50px;
  width: 50px;
  background-color: red;
}

<div class="parent">
  <div class="child" id="child1"></div>
</div>
<div class="parent">
  <div class="child" id="child2"></div>
</div>


<div class="parent" style="margin-left:20px">
  <div class="child" id="child3"></div>
</div>
<div class="parent">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

View on JSFiddle