2013-08-26 59 views
0

我使用json文件中的數據創建和定位一些div元素(書桌),並將可拖動的jQuery函數應用於它們。這工作正常,除了一件小事情,當你去點擊並移動divs,他們跳下屏幕大約一英寸。爲什麼會發生這種情況,如何解決?謝謝 :)。jQuery的可拖動函數

$(document).ready(function(){ 
$("a").click(function(event) { 

    alert("Thanks for visiting!"); 
    $("#desk").draggable(); 
}); 
$.getJSON("static/js/desks_dc.json", function(data){ 
    console.log(data); 

    factor = 1.228; 

    for(var i = 0; i< data.desks.length; ++i){ 
     var div = document.createElement("div"); 
     var desk_label = (data.desks[i].id); 
     div.style.position ='absolute'; 
     div.style.height= '15px'; 
     div.style.width= '25px'; 
     div.style.textAlign= 'center'; 
     div.style.color='#999998'; 
     div.style.fontFamily= 'Verdana, Arial, Sans-Serif'; 
     div.style.top = (data.desks[i].top-522.529)*factor+'px'; 
     div.style.left = (data.desks[i].top-45.882)*factor+'px'; 
     div.style.backgroundColor='#CCCCCC'; 
     div.style.text= desk_label; 


      /*Choose Desk Color*/ 
      if(data.desks[i].research == "Thermal") 
      { 
       div.style.backgroundColor='#F03005'; 
      } 
      else if(data.desks[i].research == "Fluids") 
      { 
       div.style.backgroundColor='#0520F0'; 
      } 
      else if(data.desks[i].research == "Solids") 
      { 
       div.style.backgroundColor='#15D615'; 
      } 
      else if(data.desks[i].research == "Materials") 
      { 
       div.style.backgroundColor='#E8F005'; 
      } 
      else if(data.desks[i].research == "Mechatronics") 
      { 
       div.style.backgroundColor='#6324B5'; 
      } 
      else{ 
      } 

      div.id = 'desk'; 
      $(div).draggable(); 
      document.body.appendChild(div); 
     } 
}); 

}); 

回答

0

一件事,你申請$.draggable()兩次,你並不需要在您的$(a).click()做一遍。

此外,用絕對定位的元素做這件事並不是一個好主意,看看你是否可以把你的<div>放在一個絕對定位的容器中,並將它們保持在相對位置。

0

你會想要這樣做,以便div在被附加到DOM之後才變爲可拖動狀態,而不是之前。也許只是將它附加到你的ajax調用中,然後在你的點擊事件中使其可拖動。