jQuery'；s可拖动函数

我使用json文件中的数据创建并定位一些div元素（桌面），并对它们应用可拖动的jQuery函数。这很好，除了一件小事，当你点击并移动div时，它们会在屏幕上跳下大约一英寸。为什么会发生这种情况？如何解决？谢谢：）

$（文档）.ready（函数（）{
$（“a”）。单击（函数（事件）{
警惕（“谢谢光临！”）；
$（“#桌”）.draggable（）；
});
$.getJSON（“static/js/desks_dc.json”），函数（数据）{
控制台日志（数据）；
系数=1.228；
对于（变量i=0；i

首先，您要应用

$.draggable（）

两次，您不需要在

$（a）中再次应用。单击（）

另外，使用绝对定位的元素也不是一个好主意，请查看是否可以将
放在绝对定位的容器中，并将其中的元素保持相对位置。
您需要对其进行结构化，以便div只有在附加到DOM之后才可以拖动，而不是之前。也许只是在ajax调用中附加它，然后在单击事件中使其可拖动

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

});