CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggable
Ferdy Hoefakker
Ferdy Hoefakker

Reputation: 73

Dragging a div out from underneath multiple other divs

I have been trying to create a test case for a webapplication we are making and I am quite close to a solution, but the final part has me stumped...

We need to be able to drag divs around (no problem there), but some of the divs need to be locked in place (again, no problem).

The problem arises when a draggable div is stuck underneath a non draggable div. I have fixed this somewhat, but it only works if there is only ONE non draggable div on top of the draggable one.The moment it overlaps with another non draggable div, it won't work. Which is weird, as I am correctly accessing the draggable div.

my HTML:

<body>

<div id="div1" class="draggable"></div>
<div id="div2" class="locked"></div>
<div id="div3" class="locked"></div>

</body>

And here is my javascript:

<script>

         $(document).ready(function () {
             $(document).mousemove(function (e) {
                 window.mouseXPos = e.pageX;
                 window.mouseYPos = e.pageY;
             });
         });

        $(function () {
            $(".draggable").draggable();
        });

        $('.locked').ready(function () {
            $('.locked').mousedown(function (e) {
                var layer = e.target; 
                $("#data").html($("#data").html() + " " + layer.id);
                $(layer).addClass("hide");
                var lowerLayer = document.elementFromPoint(window.mouseXPos, window.mouseYPos);

                if ($(lowerLayer).hasClass("locked")) {
                    $(lowerLayer).mousedown();
                }

                else if ($(lowerLayer).hasClass("draggable")) {
                    $("#data").html($("#data").html() + " " + lowerLayer.id);
                    $(lowerLayer).trigger(e);
                }

                $(layer).removeClass("hide");
            });
        });


    </script>

Okay, so the idea is this, I use jquery to set everything with the class "draggable" to be able to be dragged. The body gets a mousemove event to store the current mouse position. While all the elements with the "locked" class, will fire a mousedown event. In this event, I hide the element I am clicking on by adding a class called "hide" (which contains only a display: none).

At this point, the element underneath the clicked element is visible. Using the elementFromPoint combined with my stored mouse positions, I grab the lower element.

By then checking if it is "locked" or "draggable" I can determine what this element should do. If it's locked, I force it to execute a mousedown event. If it's draggable, I use the .trigger(e) to start dragging.

I then remove the "hide" class again, so that the element does not stay hidden.

Using the div called data, I can see that the function does indeed reach the draggable div. However, if both locked divs are on top of it, it will not start dragging. If there is only one locked div on top, I can then start dragging the draggable div.

In my opinion, this should work without any problems. I mean, it works with only 1 overlapping div, and even with 2 (or more), I am still triggering the code in the else if statement.

What am I missing/overlooking?

-Ferdy

Upvotes: 3

Views: 1545

Answers (1)

urraka
urraka

Reputation: 1017

I rewrote your script slightly differently and it seems to work. The problem might be that you're using e.target, but i'm not really sure. Here's what i did:

$(".draggable").draggable();

$(".locked").mousedown(function(e) {
    var layer = $(this);
    layer.addClass("hide");

    var lowerLayer = $(document.elementFromPoint(e.pageX, e.pageY));

    if (lowerLayer.hasClass("draggable") || lowerLayer.hasClass("locked"))
        lowerLayer.trigger(e);

    layer.removeClass("hide");
});

http://jsfiddle.net/AXycq/

Upvotes: 1

Related Questions