Jônatas

?I could understand a little, but I'll study it later.

I need a method that when called creates only one circle at a time and has drag and drop. That's what I had tried to do earlier.

So, is for load big things right? I was ignoring the "unnecessary" visual code warning when I was using await. xC What should I do to create another circle? Because my plan was to make a button to create circles. So this is where you create the circles that are in the array at once. But I want to be able to add another after those same already loaded. I suppose calling this map again will load everyone again, right?

here https://codepen.io/j-natas-dp/pen/XWWNamR?editors=0010

here https://codepen.io/j-natas-dp/pen/XWWNamR?editors=0010 i've already lost several hours in this i feel so stupid man

Sorry, i don't get it. Where did you add? Seems the same code to me. But in my angular site, i can move like you did. What i can not do is add more than one circle because just the last one work(can move).

https://codepen.io/j-natas-dp/pen/OJJbgMv in the code pen dont work at all. I made in angular, there any problem?

async function addCircle(raio){ await svgCircle.push('<circle id="c'+circleCount+'" class="handle" cx="0" cy="0" r="'+raio+'" style="fill: dodgerblue;"/>') var st = '<svg style="position: fixed;width: 100%;height: 100%;">' for(let s of svgCircle){ st += await s; } st += await '</svg>' divForAdd.innerHTML = await st; await handles.push(document.getElementById("c"+circleCount)); await TweenLite.set(handles[circleCount], { x: 200, y: 100 }) drags.push(Draggable.create(handles[circleCount], { onDrag: function() { if(!loaded)return ... }, onDragEnd: function (e) { //see if the target overlaps with the element with ID "element2" if (this.hitTest("#c" + (0))) { ... } } })); circleCount++; } Hi, i new in JS and Draggable. So, im trying to put some circles in svg tag but just the last elements works when i call more than one "addCircle". What i'm doing wrong? Sorry for the bad english.