jQuery Draggable在拖动时获取负位置值答案

【问题标题】：jQuery Draggable Getting Negative Position Value When DraggedjQuery Draggable在拖动时获取负位置值
【发布时间】：2013-09-02 15:43:09
【问题描述】：

背景

我正在构建一个流星应用程序，我在其中保存相应 div 的对象位置和大小。当再次访问此页面时，我重新创建了所有 div 并适当地重新填充了对象的大小和位置。我正在重新填充 div 和相应的对象，然后在 Template.[name].rendered 中调用 jQuery $().draggable()。

    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
                });
}
        }

问题

当我尝试在第一个 Div 中拖动对象时，位置（左、上）值变为负值。它只发生在我添加到 DOM 的第一个 div 中的对象上。当我删除可拖动的包含参数时，它不再获得负位置，但它也不再被包含。

请帮助我弄清楚如何处理这种奇怪的行为。谢谢

【问题讨论】：

如果您在创建 draggable 之前没有内联样式，它是否不再具有负值？我知道这会破坏你想做的事情，但想知道那里是否有问题。容器在什么位置？静态的、相对的、绝对的？
@DaveStein 我尝试删除内联样式，但当我尝试拖动时，值仍然变为负数。元素容器具有绝对定位，否则它不适用于 jQuery Draggable。还有其他建议吗？
在你调用draggable之前添加一个断点，然后在重新渲染之后......你认为它们应该在哪里？内联样式是否始终正确？
@DaveStein 问题已解决。查看下面的解决方案。感谢您的帮助。

标签： jquery jquery-ui meteor jquery-draggable

【解决方案1】：

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

解决方案

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

【讨论】：