CODEWITHSUNDEEP
jquery-uiinitializationdraggable
user2107435
user2107435

Reputation:

Uncaught Error: cannot call methods on draggable prior to initialization; attempted to call method 'enable'

After many attemps and reading on google and here I have failed to resolve, issue occurs after 'resize' event .

can you help me ?

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

similar question (stack overflow) :

cannot call methods on draggable prior to initialization

Upvotes: 2

Views: 1644

Answers (1)

Twisty
Twisty

Reputation: 30893

Based on my testing, I would advise using this or $(this) versus e.target in your code. There are also a few things you can do to optimize your code. I got all parts working, yet widget is still not populate until after a click event. JSFiddle Example: 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');
  });
});

On click I pass $(this) into widget. When the resize event happens, no errors are generated.

I would advise you create some counter to check for click events on your .parent elements. See example: https://jsfiddle.net/ghv46m0s/2/ If the user resizes the browser, this counts as a resize event and can be part of the problem.

Upvotes: 2

Related Questions