0

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

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

});
4

2 回答 2

0

一方面，你申请$.draggable()了两次，你不需要在你的$(a).click().

此外，使用绝对定位的元素执行此操作也不是一个好主意，看看您是否可以将您<div>的 's 放在绝对定位的容器中并保持内部相对。

于 2013-08-26T22:56:37.193 回答
0

您将需要对其进行结构化，以便 div 仅在附加到 DOM 之后才变得可拖动，而不是之前。也许只是将它附加到您的 ajax 调用中，然后在您的点击事件中使其可拖动。

于 2013-08-26T23:01:29.297 回答