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

Answer 1

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.