javascript - 页面某些部分加载后，jQuery 可拖动功能不起作用

Question

我正在构建此页面: http://codediaries.club/team.php?id=126

我对 jQuery 可拖动函数有一个具体问题。

如您所见，我对某些元素使用了 jQuery 和 bootstrap。我的问题是，在窗口加载后，我尝试运行 jQuery 代码以使第三个选项卡(“Formation”)中的某些 div 元素可在特定区域内拖动。这是我的代码:

<script>
$(window).load(function() {

           $(".ui-draggable").each(function(i, obj) {
                var self = this;
                var stringID = self.id.replace("man", "");
                var formationID = self.id.replace("formation", "map");
                formationID = formationID.replace("man", "formation");
                formationID = formationID.substring(0, 14);
                var coordXString = "coordX"+stringID;
                var coordYString = "coordY"+stringID;
                var positionRoleString = "positionRole"+stringID;
                this.start_x = $("[name='"+coordXString+"']").val();
                this.start_y = $("[name='"+coordYString+"']").val();
                this.start_role = $("[name='"+positionRoleString+"']").val();

                obj.draggable({
                    containment: "."+formationID,
                }).css("position", "absolute");

            });

        });

控制台在“obj.draggable”行中显示错误，指出“draggable 不是函数”。

但是，我测试过，如果我把这行代码放在文档的开头，

$( function() {
          $(".draggable").draggable();
  } );

它没有显示此错误，所以我猜想，某些内容会在特定时间后加载，并破坏 jQuery 函数。

提前感谢所有观看并想要提供帮助的人。

Answer 1

看起来循环中的值 (obj) 是一个 HTML 元素而不是 jQuery 元素，并且必须在 jQuery 元素上调用draggable。尝试使用 jQuery 包装器包围您的 obj。

所以改变这个:

obj.draggable({
  containment: "."+formationID,
}).css("position", "absolute");

致:

$(obj).draggable({
  containment: "."+formationID,
}).css("position", "absolute");