背景
我正在构建一个流星应用程序,我在其中保存对应div的对象位置和大小。再次访问此页面时,我重新创建所有div并相应地重新填充对象大小和位置。我重新填充div和相应的对象,然后在模板中调用jQuery $()。draggable()。[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
});
}
}
问题
当我尝试在第一个Div中拖动对象时,位置(左侧,顶部)值变为某个负值。它只发生在我添加到DOM的第一个Div中的对象。当我删除了draggable的containment参数时,它不再获得负面位置,但它也不再包含。
请帮我弄清楚如何处理这种奇怪的行为。感谢
答案 0 :(得分:5)
这个问题特定于我的问题,但这里的一般问题是如何正确使用jQuery UI Draggable的包含。
<强>解决方案强>
由于我的选择器对于我想要拖动的所有元素是相同的,因此它们也必须具有相同的包含参数。如果你想拥有不同的包含参数,你必须有唯一的选择器,否则你调用draggable()的第一个元素将覆盖其包含参数,并且会发生这种奇怪的行为。