CODEWITHSUNDEEP
jquerycss
factordog
factordog

Reputation: 597

Jquery div move with mouse

I have a small piece of Jquery im trying to get to work.

$(document).on('bind', 'mousemove', function(e){
    e.preventDefault();
    $('.circle2').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
});

Basically the circle is supposed to follow your mouses position. However there seems to be something that im missing.

Here is the CSS for the circle:

.circle2{
  position: absolute;
  float: left;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 90px;
}

https://jsfiddle.net/w4b8ykqu/

Upvotes: 1

Views: 195

Answers (5)

Punit Gajjar
Punit Gajjar

Reputation: 4987

Here is the working demo for the same:

HTML:

<div class="row">
    <div class="col-md-12 spacc">
        <div class="circle2"></div>
    </div>
</div>

CSS:

.circle2{
  position: absolute;
  float: left;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 90px;
}

JS:

$(document).mousemove(function(e) {
    $('.circle2').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});

https://jsfiddle.net/SYwba/736/

Upvotes: 0

Jobelle
Jobelle

Reputation: 2834

 $(document).ready(function () {

     $(document).on('mousemove', function (e) { 
         e.preventDefault();
         $('.circle2').css({
             left: e.pageX + 20,
             top: e.pageY
         });
     });

});

Upvotes: 0

Parth Trivedi
Parth Trivedi

Reputation: 3832

You have binded .on() mousemove wrongly

//remove "bind"
$(document).on('mousemove', function(e) {
    e.preventDefault();
    $('.circle2').css({
        left: e.pageX + 20,
        top: e.pageY
    });
});

Run Snippet

//remove "bind"
$(document).on('mousemove', function(e) {
    e.preventDefault();
    $('.circle2').css({
        left: e.pageX + 20,
        top: e.pageY
    });
});
.circle2 {
    position: absolute;
    float: left;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-12 spacc">
        <div class="circle2"></div>
    </div>
</div>

Upvotes: 2

K K
K K

Reputation: 18099

Use this approach:

$(document).on('mousemove', function(e){ //Remove "bind"
        e.preventDefault();
        $('.circle2').css({
           left:  e.pageX + 20,
           top:   e.pageY
        });
    });

and add jQuery library

Demo: https://jsfiddle.net/w4b8ykqu/5/

The format for binding an event:

.on( events [, selector ] [, data ], handler )

and bind is not an event or selector.

Reference: http://api.jquery.com/on/#on-events-selector-data-handler

Upvotes: 2

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use 

 $(document).on('mousemove', function(e) {
    e.preventDefault();
    $('.circle2').css({
        left: e.pageX + 20,
        top: e.pageY
    });
});

remove bind

mousemove documentation

WORKING DEMO

Upvotes: 0

Related Questions