jQuery Draggable Getting Negative Position Value When Dragged

Question

Background

I am building a meteor application where I save objects positions and sizes for a corresponding div. When this page is accessed again, I recreate all the divs and re-populated the objects size and positions appropriately. I am re-populating the divs and corresponding objects then calling jQuery $().draggable() inside a Template.[name].rendered.

    Template.pageEditor.rendered = function(){
        var currentBook = Books.findOne({_id: Session.get("currentBookId")});
        console.log(currentBook);
        var currentPages = currentBook.pages;
        console.log(currentPages);

        for(i in currentPages){
            var currentElements = currentPages[i].elements;
            var currentPageNumber = currentPages[i].number;
            console.log(currentElements);
            $(".pageEditor").append("<div class='page' id='page"+currentPageNumber+"' style='background-image: url("+currentPages[i].scene+");'></div>");
            for(j in currentElements){
                var element = "<div class='pageElement character inPage' style='top:"+currentElements[j].top+"; left:"+currentElements[j].left+";'><img src='"+currentElements[j].src+"' width='"+currentElements[j].width+"' height='"+currentElements[j].height+"'/></div>";
                console.log(element);
                $("#page"+currentPageNumber).append(element);

                //make element draggable
                $(".pageElement.inPage").addClass("draggable");
                $(".draggable.pageElement").draggable({
                    containment: "#page"+currentPageNumber,
                    scroll: false
                });
}
        }

Problem

When I try to drag objects in the first Div the position (left, top) values becomes some negative value. It only happens to objects in the first Div I add to the DOM. When I remove the containment parameter for draggable it doesn't get the negative positions anymore, but it is also no longer contained.

Please help me figure out how I could deal with this odd behavior. Thanks

If you don't have the inline styles before creating `draggable` does it stop having negative values? I know that will break what you want to do, but wondering if there's an issue there. Also what position is the container? static, relative, absolute? — Dave Stein, Aug 30 '13 at 02:51
@DaveStein I have tried removing the inline styles and the values still turn negative when I try to drag. Element container is has absolute positioning otherwise it doesn't work with jQuery Draggable. Any other suggestions? — Pan Wangperawong, Aug 30 '13 at 06:53
Add a breakpoint to right before you call draggable, and right after on the re-render.... are the elements where you think they should be? Are the inline styles correct the whole time? — Dave Stein, Aug 30 '13 at 14:31
@DaveStein problem solved. Checkout the solution below. Thanks for your help. — Pan Wangperawong, Aug 30 '13 at 20:17

score 5 · Accepted Answer · answered Aug 30 '13 at 20:16

This question was specific to my problem, but the general problem here is how to properly use containment for jQuery UI Draggable.

Solution

Since my selector was the same for all the elements I wanted to be draggable they also must have the same containment parameter. If you want to have different containment parameters you must have unique selectors otherwise the first element you call draggable() on will have its containment parameter overridden and this odd behavior will occur.

jQuery Draggable Getting Negative Position Value When Dragged

1 Answers1