jQuery的可拖函数

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调用中，然后在click事件中使其可拖放。