2013-08-30 54 views
2

背景jQuery的可拖動獲得負的位置值拖動時

我建立一個流星應用程序,我保存對象的位置和大小進行相應的股利。當再次訪問此頁面時,我重新創建所有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中的對象。當我刪除可拖動的容器參數時,它不再獲得負面位置,但它也不再被包含。

請幫我弄清楚我該如何處理這種奇怪的行爲。謝謝

+0

如果您在創建'draggable'之前沒有內聯樣式,它會停止使用負值嗎?我知道這會打破你想做的事,但想知道那裏是否有問題。容器的位置是什麼?靜態,相對,絕對? –

+0

@DaveStein我嘗試刪除內聯樣式,並且當我嘗試拖動時,值仍然變爲負值。元素容器具有絕對定位,否則它不適用於jQuery Draggable。還有其他建議嗎? –

+0

在調用draggable之前添加一個斷點,然後在重新渲染之後....是你認爲它們應該是的元素嗎?內聯樣式是否糾正整個時間? –

回答

4

這個問題是特定於我的問題,但這裏的一般問題是如何正確使用jquery UI Draggable的遏制。

解決方案

因爲我的選擇是所有我想成爲拖動它們還必須具有相同的參數圍堵的元素是相同的。如果你想有不同的包含參數,你必須有唯一的選擇器,否則你調用draggable()的第一個元素將會覆蓋它的包含參數,並且會出現這種奇怪的行爲。

+1

完美!以上是問題,這是解決方案。謝謝!... –