Question

我使用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);
        }
});

});

Answer 1

首先，您需要两次申请$.draggable()，而不需要在$(a).click()中再次执行此操作。

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

Answer 2

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

jQuery可拖动函数

2 个答案: