未捕获的错误：在初始化之前无法调用可拖动的方法；试图调用方法“启用”答案

【问题标题】：Uncaught Error: cannot call methods on draggable prior to initialization; attempted to call method 'enable'未捕获的错误：在初始化之前无法调用可拖动的方法；试图调用方法“启用”
【发布时间】：2016-04-07 11:09:32
【问题描述】：

经过多次尝试并在谷歌和这里阅读我未能解决，在“调整大小”事件之后出现问题。

你能帮我吗？

<!DOCTYPE HTML>
<html>
<head>
<title>wb2</title>

<script type="text/javascript" src="../jquery/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery/jquery-ui.css"/>

<style>
 .parent
{
    position:relative;
    background-color: rgba(255,255,255,0.5); /* transparent 50% */
    width:120px;
    height:30px;
    text-align: center;
    border-color : blue;
    /* transparent 50% */ 
    border-style:solid 
}

 .child
{
    position:absolute;
    left:5px;
    top:5px;
    background-color:lightgray;
    width:100px;
    height:20px;
    border-color :lightgray; 
    border-width:1px; 
    border-style:solid  
}

</style>

</head>
<body>

<div id="container" style="width:300px;height:300px;background-color:yellow">

<div id='lp' class='parent' >
<label id='lf' class='child'>label</label>
</div>

<div id='bp' class='parent' >
<button id='bf' class='child'>button</button>
</div>

<div id='sp'class='parent' >
<select id='sf' class='child'>select</select>
</div>

</div>

</body>
<script>
widget = {}

$('.parent').click(function(e) 
{
    widget = e.target ;

    $('.parent').each(function(i, obj) 
    {

        $(obj).draggable( 'disable' )
        $(obj).resizable( 'disable' ); 
        $(obj).css({ "border-width":"0px"} );   

    });

    $(widget).draggable( 'enable' )
    $(widget).resizable( 'enable' ); 
    $(widget).css({ "border-width":"1px"} );


});



$( window ).resize(function() 
{
    var border=10 ;

    if ( widget !== undefined )
    {
        ep = widget 
        epid = $(ep).attr('id' )

        ec = ep.children[0]
        ecid = $(ec).attr('id' )

        w = parseInt ( $(ep).css ( 'width' ) );
        h = parseInt ( $(ep).css ( 'height') );     

        if ( w-border< 0 ) w=border;
        if ( h-border < 0 ) h=5;

        $(ec).css ( 'width'   , w-border )
        $(ec).css ( 'height'   , h-border )

    }       
});


$('.parent').each(function(i, obj) 
{
    $(obj).resizable();
    $(obj).draggable();
    $(obj).resizable( 'disable' );  
    $(obj).draggable( 'disable' ) ;
    $(obj).css({ "border-width":"0px"} );   
});  

</script>
</html>

类似问题（堆栈溢出）：

cannot call methods on draggable prior to initialization

【问题讨论】：

我在您的按钮代码中看到 HTML 语法错误：<button id='bf' ='child'>button</button> 应该是：<button id='bf' class='child'>button</button>
您使用的是哪个版本的 UI 以及什么主题？
我更正了复制和粘贴错误，但结果没有改变，在调整大小事件时给我错误...！？我正在使用最新版本的 jquery UI
我知道你在哪里设置了widget = {}，然后当你执行resize 时，除非发生click 事件，否则它没有任何价值。如果没有触发其他事件，widget 如何填充？
我的测试小提琴：jsfiddle.net/ghv46m0s

标签： jquery-ui initialization draggable

【解决方案1】：

根据我的测试，我建议在您的代码中使用 this 或 $(this) 与 e.target。您还可以做一些事情来优化您的代码。我得到了所有部分的工作，但直到click 事件之后，widget 仍然没有填充。 JSFiddle 示例：https://jsfiddle.net/ghv46m0s/3/

JQUERY

$(function() {
  widget = {};

  $('.parent').click(function(e) {
    $('.parent').each(function(k, v) {
      $(v)
      .resizable('disable')
      .draggable('disable')
      .css({
        "border-width": "0px"
      });
    });
    $(this).draggable('enable')
    .resizable('enable')
    .css({
      "border-width": "1px"
    });
    widget = $(this);
  });

  $(window).resize(function(e) {
    var border = 10;
    console.log("Doing resize of window.");
    if (widget !== undefined) {
      ep = widget;
      epid = $(ep).attr('id');
      console.log(ep);

      ec = ep.children[0];
      ecid = $(ec).attr('id');

      w = parseInt($(ep).css('width'));
      h = parseInt($(ep).css('height'));

      if (w - border < 0) w = border;
      if (h - border < 0) h = 5;

      $(ec).css('width', w - border);
      $(ec).css('height', h - border);
    }
  });

  $('.parent').each(function() {
    $(this)
      .resizable()
      .draggable()
      .css({
        "border-width": "0px"
      });
    $(this)
      .resizable('disable')
      .draggable('disable');
  });
});

在click 上，我将$(this) 传递到widget。当resize 事件发生时，不会产生错误。

我建议您创建一些计数器来检查您的.parent 元素上的click 事件。参见示例：https://jsfiddle.net/ghv46m0s/2/ 如果用户调整浏览器大小，这将被视为 resize 事件，并且可能是问题的一部分。

【讨论】：