Question

好吧，我真的不确定我在这里做错了什么，但div没有创建，我不知道为什么？

$('#tree_01').draggable({appendTo: 'body', helper: 'clone', stop: function(event, ui) {
                var bg_pos_x = -5;
                var bg_pos_y = -1516;
                var width = 148;
                var height = 174;
                var pos_x = $(ui.helper).position().left;
                var pos_y = $(ui.helper).position().top;
                var id = 'tree_'+pos_x+'_'+pos_y;
                folliage(id,bg_pos_x,bg_pos_y,width,height,pos_x,pos_y);
            }});

当拖动draggable元素时，它应该运行代码并转到以下函数：

function folliage(id,bg_pos_x,bg_pos_y,width,height,pos_x,pos_y){
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    document.getElementById(id).style.left=pos_x+'px';
    document.getElementById(id).style.zIndex='5';
    document.getElementById(id).style.left=pos_y+'px';
    document.getElementById(id).style.width=width+'px';
    document.getElementById(id).style.height=height+'px';
    document.getElementById(id).style.background='url(../img/village.png)';
    document.getElementById(id).style.backgroundPosition=bg_pos_x+'px '+bg_pos_y+'px';

}

但div没有被创建????

Answer 1

您永远不会将div添加到页面中。您需要使用append之类的东西将div添加到DOM。

Answer 2

<div>元素确实已创建，但您永远不会将其添加到DOM树中，因此它永远不会在页面上显示。

您可以将新元素附加到页面正文：

document.body.appendChild(newdiv);

顺便说一句，你的folliage()函数会更短，并且你可以更可读地将jQuery的使用扩展到它的代码。

另请注意以下行：

document.getElementById(id).style.left=pos_y+'px';

可能应该阅读：

document.getElementById(id).style.top = pos_y + 'px';

Answer 3

如果你正在使用jQuery，你应该使用jQuery的元素创建方法而不是document.createElement。但看起来您的问题是您没有将新创建的元素添加到文档中。尝试使用jQuery('<div id=' + id + '/>').appendTo('body');或类似的东西。

当停止创建div时，Jquery可拖动

3 个答案: