页面的某些部分加载后，jQuery 可拖动不起作用答案

【问题标题】：jQuery draggable doesn't work after certain parts of page have loaded页面的某些部分加载后，jQuery 可拖动不起作用
【发布时间】：2017-06-30 21:14:18
【问题描述】：

我正在构建这个页面： 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 is not a function”。

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

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

它没有显示这个错误，所以我猜是在特定时间后加载的东西，并破坏了 jQuery 函数。

感谢所有关注并希望提前提供帮助的人。

【问题讨论】：

标签： javascript jquery html jquery-ui draggable

【解决方案1】：

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

所以改变这个：

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

收件人：

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

【讨论】：