2013-08-26 6 views
0

json 파일의 데이터를 사용하여 div 요소 (책상)를 만들고 위치를 지정하고 draggable jQuery 함수를 적용합니다. 이것은 하나의 작은 것을 제외하고는 잘 동작합니다. div를 클릭하여 이동하면 약 1 인치 정도 화면 아래로 뛰어옵니다. 왜 이것이 발생하며 어떻게 고칠 수 있습니까? 감사 :).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에 추가 된 후에 만 ​​드래그 가능하도록 구조화해야합니다. 아마 그냥 아약스 호출에 추가 한 다음 클릭 이벤트에서 드래그 할 수있게 만들 수도 있습니다.

관련 문제