Moving a div within a div on mouse move

Question

Can someone help me with a issue I have. So I have two divs div1 needs to be the height and width of the browser screen and over flow hidden.

Within that div I have another div div2 which is twice the width and hight of the first div. I then need to move that div around on mouse move.

#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>

Kind of like this but when my mouse is in the top left corner of the view box the top top of the red box should be in that corner also.

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

Possible duplicate of [HTML5 Drag and Drop anywhere on the screen](http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen) — Just a student, Mar 24 '17 at 09:45

score 3 · Answer 1 · answered Mar 24 '17 at 09:32

Try this code:

<!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>

RJParikh · Answer 2 · 2017-03-24T09:49:44.450

0

Use below code:

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

edited Mar 24 '17 at 09:49

answered Mar 24 '17 at 09:27

RJParikh

4,096
1
19
36

This is the idea i'm going for but it needs to be when my mouse is in the bottom right corner the top left corner of the red box need to be in the top left of the outer div. if that makes sense? – CIB Mar 24 '17 at 09:37
Kind of like this but when my mouse is in the top left corner of the view box the top left of the red box should be in that corner also. https://codepen.io/anon/pen/bqKogL – CIB Mar 24 '17 at 09:49
Ok got it your issue.. Let you know once i will find solution – RJParikh Mar 24 '17 at 09:55

Moving a div within a div on mouse move

2 Answers2