Блог

Главная - Вопросы по программированию - Как переместить родительский div, когда дочерний div касается границ родительского div

Как переместить родительский div, когда дочерний div касается границ родительского div

#javascript #jquery #css #canvas #mousemove

#javascript #jquery #css #холст #перемещение мыши

Вопрос:

В следующем коде у меня есть три div.

 <div id="wrap">
  <div id="outer">
    <div id="inner">
    </div>
  </div>
</div>

Здесь «внутренний» div перемещается с событием mouseMove. Как я могу переместить «внешний» div вместе с «внутренним» div, когда «внутренний» div касается верхней и левой части «внешнего» div, но «внешний» div не должен перемещаться, когда «внутренний» div внутри или не касается «внешнего» div?

 var innerDiv = $('#inner');
var outerDiv = $('#outer');
var outDim = outerDiv.offset();
outDim.right = (outDim.left   outerDiv.width());
outDim.bottom = (outDim.top   outerDiv.height());
$(document).on('mousemove', function(e) {
  var x = (e.clientX) - 15;
  var y = (e.clientY) - 15;
  var x_allowed = x >= outDim.left amp;amp; x <= (outDim.right - innerDiv.width());
  var y_allowed = y >= outDim.top amp;amp; y <= (outDim.bottom - innerDiv.height());
  if (y_allowed) {
    innerDiv.css({
      top: y   'px',
    });
  } else {
    //fine tune tweaks
    if (y >= outDim.top) {
      innerDiv.css({
        top: (outDim.bottom - innerDiv.height())   'px',
      });
    }
    if (y <= (outDim.bottom - innerDiv.height())) {
      innerDiv.css({
        top: outDim.top   'px',
      });
    }
  }

  if (x_allowed) {
    innerDiv.css({
      left: x   'px'
    });
  } else {
    //fine tune tweaks
    if (x >= outDim.left) {
      innerDiv.css({
        left: outDim.right - innerDiv.width()   'px',
      });
    }
    if (x <= (outDim.right - innerDiv.width())) {
      innerDiv.css({
        left: outDim.left   'px',
      });
    }
  }


});  
 #wrap {
  height: 200px;
  width: 200px;
  border: 2px solid black;
}

#outer {
  height: 100px;
  width: 100px;
  border: 2px solid blue;
  margin: 0 auto;
}

#inner {
  height: 40px;
  width: 40px;
  border: 2px solid red;
  position: absolute;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <div id="outer">
    <div id="inner">

    </div>
  </div>
</div>

Ссылка на скрипку