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.

Answer 1

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');