当子div触摸父div边界时如何移动父div

问题描述

以下代码中有三个div。

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

这里“ inner” 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 && x <= (outDim.right - innerDiv.width());
  var y_allowed = y >= outDim.top && 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>

Fiddle link

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）