Question

经过多次尝试并在谷歌和这里阅读我没有解决，在'resize'事件之后出现问题。

你可以帮帮我吗？

<!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

Answer 1

根据我的测试，我建议您在代码中使用this或$(this)与e.target。您还可以采取一些措施来优化代码。我让所有部分都正常工作，但在widget事件发生之后click仍未填充。 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事件时，不会生成任何错误。

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

未捕获错误：在初始化之前无法调用draggable上的方法;试图调用方法'启用'

1 个答案: