CODEWITHSUNDEEP
javascriptjquery
Shishant
Shishant

Reputation: 9294

Mouse position relative to div

I am using jquery ui for drag and drop. I am trying to get mouse position relative to div, here is my code:

$( "#db_tables " ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function( event, ui ) {
    var x = ui.position.left - ui.offset.left; // tired event.pageX - this.offsetLeft;
    var y = ui.position.top - ui.offset.top; // tired event.pageY - this.offsetTop;
    $( '<div style="margin-top:' + y   + 'px; margin-left:' + x   + 'px; "></div>' ).html( ui.draggable.html() ).appendTo( this );
  }
});

But the position of dropped div is not correct, Can anybody please tell me what is wrong with code?

Upvotes: 11

Views: 31757

Answers (2)

Steve
Steve

Reputation: 5005

Seeing as it's now 2021... for those looking to achieve it without JQuery, here is a demo.

const element = document.getElementById('img');
const globalCursorLabel = document.getElementById('global-cursor-label');
const imgCursorLabel = document.getElementById('img-cursor-label');
const boundsLabel = document.getElementById('bounds-label');

// Bounding rect info
const imgBoundInfo = element.getBoundingClientRect();
boundsLabel.textContent = `Bounding Rect Info: ${JSON.stringify(imgBoundInfo)}`;

element.addEventListener('mousemove', (e) => {
    // Mouse position
    const globalCursor = { x: 0, y: 0 };
    globalCursor.x = e.clientX;
    globalCursor.y = e.clientY;
    globalCursorLabel.textContent = `Global Position: [x: ${globalCursor.x}px, y: ${globalCursor.y}px]`;

    // Position in image considering top left of image to be 0px, 0px
    const imgCursor = { x: 0, y: 0 };
    imgCursor.x = globalCursor.x - imgBoundInfo.left;
    imgCursor.y = globalCursor.y - imgBoundInfo.top;
    imgCursorLabel.textContent = `Img Position: [x: ${imgCursor.x}px, y: ${imgCursor.y}px]`;
});
body {
  display: flex;
  flex-direction: column;
}

img {
  margin-top: 20px;
  margin-left: 20px;
  height: 100px;
  width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="img" src="https://www.placecage.com/300/200" alt="nick"/>
    <label id="global-cursor-label">Hover over Nick</label>
    <label id="img-cursor-label">Hover over Nick</label>
    <label id="bounds-label"></label>
</body>
</html>

Upvotes: 3

fehays
fehays

Reputation: 3167

Take a look here:

http://docs.jquery.com/Tutorials:Mouse_Position

EDIT: The jquery docs page above is broken. Here is an alternate:

http://api.jquery.com/event.pageX/

event.pageX and event.pageY should give you mouse position

$("#drag").draggable({
    stop: function(event, ui){
        var x = event.pageX - ui.offset.left;
        var y = event.pageY - ui.offset.top;       
    }
});

EDIT: here's an example showing how to track the mouse position relative to the element you are dragging http://jsfiddle.net/87fqr/1/

ANOTHER EDIT:

This should work if you want the position of the mouse relative to the droppable:

$("#db_tables").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) {
            var offset = $(this).offset(),
            x = event.pageX - offset.left,
            y = event.pageY - offset.top; 
        $('<div style="margin-top:' + y + 'px; margin-left:' + x + 'px; "></div>' ).html( ui.draggable.html() ).appendTo( this );
    }
});

More complete example here: http://jsfiddle.net/87fqr/2/

Upvotes: 18

Related Questions