jQuery drag image under another image

Question

I need to drag an image that is currently under another png image.

I thought I could do this easily by using this code:

$(document).ready(function() {
    $(".imageOverlay").mousedown(function(eventObject){
    $('#draggable').drag();
    return false;
    });
});

However it doesn't seem to work.

You can find an example without the overlying image here

And here is the example with the overlying image here

Any help would be great, please keep your answers relatively simple as I am no guru in jQuery.

Thank you.

Is there a reason that your using jQuery 1.2.6? It's at 1.8 now.. — , Aug 21 '12 at 07:16
There is no reason. I can update jQuery to 1.8 but it doesn't resolve my issue. — jmgibbo, Aug 21 '12 at 14:05

jmgibbo · Accepted Answer · 2012-10-24T19:06:19.283

I managed to get this working by taking the width, height and positioning of the draggable object and giving the underlaying image the same css positioning, width and height.

This is the code:

    var imgdrag = $(#draggable); //This is the box you drag
    var imgselector = $(.imageUnderlay); //This is the image underneath

    //Get the height, width and position of the draggable box
    var height = imgdrag.height();
    var width = imgdrag.width();
    var top = imgdrag.css("top");
    var left = imgdrag.css("left");

    //Add the css style to the image underlay
    imgselector.css('top', top);
    imgselector.css('left', left); 
    imgselector.css('height', height + 'px'); 
    imgselector.css('width', width + 'px');

score 0 · Answer 2 · edited May 23 '17 at 10:34

Do this instead: listen to the onmousedown, onmousemove, onmouseup events on #container. Bind to the events using jQuery. When onmousedown occurs, and onmousemove fires, use e.pageX, e.pageY, and $('#container').offsetLeft and $('#container').offsetTop for the position, and set the new location for the underlying image. The moving logic should be on onmousemove if you want the user experience to be responsive (underlying image moves with cursor). Stop moving the underlying image when onmouseup fires.

Check out the following for an example:

Jquery mousedown + mousemove

Bottom of this page has an example of getting mouse position within the container (e.pageX, e.pageY, $('#container').offsetLeft and $('#container').offsetTop):

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

Shahan

Thank you for your help. I will try your suggestion and see how I get on. — jmgibbo, Aug 21 '12 at 14:06

jQuery drag image under another image

2 Answers2