Как перетаскивать дочерний элемент только в пределах родительского?

Question

Подскажите, пожалуйста, как разрешить перетаскивание элемента только в пределах определенных границ? В данном примере дочерний элемент .drag__drop не должен выходить за границы родительского блока .box, упираясь в его границы. Благодарю!

$('.drag__drop').on('mousedown', function(e) {
  var $this = $(this),
    $window = $(window),
    mouseX = e.pageX,
    mouseY = e.pageY,
    width = $this.outerWidth(),
    height = $this.outerHeight()
  elemX = $this.offset().left + width - mouseX,
    elemY = $this.offset().top + height - mouseY;
  e.preventDefault();
  $window.on('mousemove.drag', function(e2) {
    $this.offset({
      left: e2.pageX + elemX - width,
      top: e2.pageY + elemY - height
    });
  }).one('mouseup', function() {
    $window.off('mousemove.drag');
  });
});

.box__01,
.box__02 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.box__01 {
  background: pink;
}

.box__02 {
  background: gold;
}

.drag__drop {
  position: absolute;
  margin: auto;
}

.drag__01 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  background: white;
}

.drag__02 {
  top: 10px;
  left: 10px;
  width: 400px;
  height: 400px;
  background: gray;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>В первом блоке дочерний блок меньше родительского.<br>Во втором блоке наоборот.</p>
<div class="box__01">
  <div class="drag__01 drag__drop"></div>
</div>
<div class="box__02">
  <div class="drag__02 drag__drop"></div>
</div>

Answer 1

jQuery UI решает:

$(function() {
  $("#draggable").draggable({
    containment:".box"
  });
});

.box {
  width: 300px;
  height: 150px;
  background: pink;
}
.drag__drop {
  width: 50px;
  height: 50px;
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="box">
  <div id="draggable" class="drag__drop"></div>
</div>

БЛОГ НА HUSL

Как перетаскивать дочерний элемент только в пределах родительского?

Ответы (1 шт):