kineticJS children - Jquery draggable

Question

I am using KineticJS v4.3.3, and Jquery 2.0.3 in asp.net MVC application. I generate a child using:

  var wrapper_div = document.getElementById('container1');
    var kinetic_div = wrapper_div.children[0];
    canvaso = kinetic_div.children[0];
    canvaso.setAttribute('id', "panel1");
    context = canvaso.getContext('2d');

It works great, however when I add:

 $('#container1').draggable().resizable();

I get the following error:

Unable to get property 'setAttribute' of undefined or null reference

Would appeciate your suggestions.

Answer 1

Just in case anyone might be interested in the solution. I found when using draggable and resizable, this adds two layer so by changing the children[0] to children[3] it worked.

    var wrapper_div = document.getElementById('container1');
    var kinetic_div = wrapper_div.children[3];
    canvaso = kinetic_div.children[0];
    canvaso.setAttribute('id', "panel1");
    context = canvaso.getContext('2d');