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