jQuery's draggable function

Question

I create and position some div elements(desks), using data from a json file, and I apply the draggable jQuery function to them. This works fine except one little thing, when you go to click on and move the divs they jump down the screen approximately an inch. Why is this occurring and how can it be fixed? Thanks :).

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

});

Answer 1

For one thing, you're applying $.draggable() twice, you don't need to do it again in your $(a).click().

Also it's not a good idea to do this with absolutely-positioned elements, see if you can put your <div>'s in a container that is absolutely positioned and keep the ones inside relative.