Uncaught Error: Methoden können nicht vor der Initialisierung auf "Dragable" aufgerufen werden. versucht, Methode 'aktivieren'

Nach vielen Versuchen und lesen auf Google und hier Ich habe es nicht gelöst, Problem auftritt nach "Größe" -Ereignis auftritt.Uncaught Error: Methoden können nicht vor der Initialisierung auf "Dragable" aufgerufen werden. versucht, Methode 'aktivieren'

können Sie mir helfen?

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

ähnliche Frage (Stapelüberlauf):

cannot call methods on draggable prior to initialization

Quelle

2016-04-07 Anonymous

Ich sehe einen HTML-Syntaxfehler in Ihrem Tastencode: '' sollte sein: '' – Twisty

Welche Version von UI verwenden Sie und welches Theme? – Twisty

Ich korrigierte die Kopie und Einfügen falsch, aber das Ergebnis ändert sich nicht, gibt mir einen Fehler beim Ändern der Größe ...!? Ich benutze die neueste Version von jquery UI –

Basierend auf meinen Tests, würde ich Ihnen raten this oder $(this) gegen e.target in Ihrem Code verwenden. Es gibt auch ein paar Dinge, die Sie tun können, um Ihren Code zu optimieren. Ich habe alle Teile funktioniert, aber widget ist immer noch nicht bis nach einem click Ereignis gefüllt. JSFiddle Beispiel: 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'); 
    }); 
});

Auf click gehe ich $(this) in widget. Wenn das Ereignis resize auftritt, werden keine Fehler generiert.

Ich würde Ihnen raten, erstellen Sie einen Zähler für click Ereignisse auf Ihre .parent Elemente zu überprüfen. Siehe Beispiel: https://jsfiddle.net/ghv46m0s/2/ Wenn der Benutzer die Größe des Browsers ändert, gilt dies als resize-Ereignis und kann Teil des Problems sein.

Quelle

2016-04-08 16:21:12 Twisty

Uncaught Error: Methoden können nicht vor der Initialisierung auf "Dragable" aufgerufen werden. versucht, Methode 'aktivieren'

Antwort

Verwandte Themen