在鼠標移動的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

回答

相關問題