在鼠标移动时在 div 内移动 div答案

【问题标题】：Moving a div within a div on mouse move在鼠标移动时在 div 内移动 div
【发布时间】：2017-08-17 03:54:45
【问题描述】：

有人可以帮我解决我遇到的问题吗？所以我有两个div div1 需要是浏览器屏幕的高度和宽度并且溢出隐藏。

在那个 div 中，我有另一个 div div2，它是第一个 div 的宽度和高度的两倍。然后我需要在鼠标移动时移动那个 div。

#view-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#background-wrapper {
  background: url('../images/background.png') no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
}

<div id="view-window">
  <div id="background-wrapper">
  </div>
</div>

有点像这样，但是当我的鼠标在视图框的左上角时，红色框的顶部也应该在那个角落。

https://codepen.io/anon/pen/bqKogL

【问题讨论】：

HTML5 Drag and Drop anywhere on the screen的可能重复

标签： javascript jquery onmousemove

【解决方案1】：

试试这个代码：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title></title>
	</head>
	<body>	
		<style type="text/css">
			#move {
				height: 100px;
				width: 100px;
				position: absolute;
				top: 0;
				left: 0;
				background: green;
			}
		</style>
		<div id="move">
		</div>
		<script type="text/javascript">
			var div = document.getElementById('move');
			document.addEventListener('mousemove',function(e) {			
				div.style.left = e.pageX+"px";
				div.style.top = e.pageY+"px";
			});
		</script>
	</body>
</html>

【讨论】：

【解决方案2】：

使用下面的代码：

$(document).ready(function(){
    var $moveable = $('.moveAble');
    $(document).mousemove(function(e){
        $moveable.css({'top': e.pageY,'left': e.pageX});
    });
    
    $(".outer").height($(window).height());
    $(".outer").width($(window).width());
});

.moveAble {
    position: absolute;
}

.info {
  background-color:red;
  height: 50px;
  width:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="moveAble">
    <div class="info"></div>
  </div>
</div>

【讨论】：

这是我想要的想法，但是当我的鼠标位于右下角时，红色框的左上角需要位于外部 div 的左上角.如果这有意义吗？
有点像这样，但是当我的鼠标在视图框的左上角时，红色框的左上角也应该在那个角落。 codepen.io/anon/pen/bqKogL
好的，你的问题..让你知道一旦我会找到解决方案