在鼠标移动的div内移动div

-1

有人可以帮我解决我遇到的问题。所以我有两个div div1需要成为浏览器屏幕的高度和宽度，并且隐藏过流。在鼠标移动的div内移动div

在那个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

来源

2017-03-24 craigb88

[HTML5拖放到屏幕上的任何位置]的可能重复（http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen） –

用途：

$(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>

来源

2017-03-24 09:27:18 RJParikh

这是主意我要去，但它需要当我的鼠标在右下角红色框的左上角需要在外部div的左上角。如果这是有道理的？ – craigb88

有点像这样，但是当我的鼠标在视图框的左上角时，红框的左上角也应该在那个角落。 https://codepen.io/anon/pen/bqKogL – craigb88

好吧，有你的问题。让我们知道一次，我会找到解决方案 – RJParikh

试试这个代码：

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

来源

2017-03-24 09:32:54 mjishigh

在鼠标移动的div内移动div

回答

相关问题