【问题标题】:Jquery draggable when stop create div停止创建 div 时 Jquery 可拖动
【发布时间】:2012-03-05 04:10:30
【问题描述】:

好的,我真的不确定我在这里做错了什么,但是没有创建 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);
            }});

当可拖动元素被放下时,它应该运行代码并转到以下函数:

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 没有被创建????

【问题讨论】:

    标签: javascript jquery jquery-ui createelement


    【解决方案1】:

    你从来没有真正将 div 添加到页面中。您需要使用 append 之类的东西将 div 添加到 DOM。

    【讨论】:

    • 谢谢,这是一个愚蠢的错误,我没有意识到,我花了 2 个小时试图弄清楚,以为浏览器在搞砸我的大脑:P。谢谢
    【解决方案2】:

    <div> 元素确实被创建了,但你永远不会将它添加到 DOM 树中,因此它永远不会在页面上可见。

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

    document.body.appendChild(newdiv);
    

    顺便说一句,如果您将 jQuery 的使用扩展到其代码,您的 folliage() 函数会更短并且可能更具可读性。

    还要注意这一行:

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

    应该是这样的:

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

    【讨论】:

    • 空格有区别吗?我不是专家,只是感兴趣:)
    • 没有区别,除了提高可读性恕我直言:)
    • 大声笑,这是真的 :) 我应该养成在里面放空格的习惯 :) 谢谢
    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-07-21
      • 1970-01-01
      • 1970-01-01
      • 2017-05-22
      • 1970-01-01
      • 2010-12-28
      • 1970-01-01
      相关资源
      最近更新 更多