CODEWITHSUNDEEP
javascriptjquerycsshtml
user3877230
user3877230

Reputation: 458

Move a DIV under a another DIV via DRAGGABLE?(CSS, JQuery)

I have two different images that i stack up on each other. .image-1 is the background image, .image-2 is the foreground image. I want it like this because the foreground image is a PNG-File which contains a whole inside. When you look through that whole you see a part of the background image. I want to be capable to move the the background image via draggable in JQuery. This does not work because i can not touch the background layer because it is covered with the foreground layer. This is my sourcecode:

CSS

.image-1
{
    z-index: 0;
    position: absolute;
    background-image: url("image_1.png");
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center;
}

.image-2
{
    z-index: 1;
    position: absolute;
    background-image: url("image_2.png");
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center;
}

HTML

<div class="image-1"></div>
<div class="image-2"></div>

JQuery

$(".image-1").draggable({});

How can i access the background div via draggable but still keep the image that i move in the background?

EDITED:

I tried it like this:

$("#image-2").mousedown(function(event)
{
    $("#image-1").draggable({ });
});

but it did not work.

Upvotes: 0

Views: 1095

Answers (1)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

get the event from higher layer and pass it to lower layer. Do not trigger draggable on every mousedown but pass the drag event to the lower layer instead.

$(".image-1").draggable({});
$(".image-2").mousedown(function(event){
    $(".image-1").trigger(event);
});
.image-1
{
    z-index: 0;
    position: absolute;
    background:#444444;
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center;
}

.image-2
{
    z-index: 1;
    position: absolute;
    background:#ff0000;
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="image-1"></div>
<div class="image-2"></div>

Upvotes: 2

Related Questions