3

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

4

1 回答 1

5

这个问题是针对我的问题的，但这里的一般问题是如何正确使用 jQuery UI Draggable 的包含。

解决方案

由于我的选择器对于我想要可拖动的所有元素都是相同的，因此它们也必须具有相同的包含参数。如果你想有不同的包含参数，你必须有唯一的选择器，否则你调用 draggable() 的第一个元素将覆盖它的包含参数，并且会发生这种奇怪的行为。

于 2013-08-30T20:16:36.670 回答