[Draggable attached to last element only]

Quote

If you're just starting out with JavaScript, you probably shouldn't worry too much about await and promises. It's really only useful when you start dealing servers request and loading stuff asynchronously.

 

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

[Draggable attached to last element only]

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.

[Draggable attached to last element only]

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?

[Draggable attached to last element only]

here

See the Pen XWWNamR?editors=0010 by j-natas-dp (@j-natas-dp) on CodePen

3 hours ago, OSUblake said:

Why are you using await everywhere? That is not how it's supposed to be used... not even close. Everytime you use await, you create a promise.

 

One problem is that everytime you call loadHTML, you were recreate a bunch of the same stuff over. You need to rework some of that logic.

 

To generate html templates, use template literals.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

https://2ality.com/2015/01/template-strings-html.html

https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

 

And using innerHTML replaces everything inside your canvas element. Use insertAdjacentHTML instead.

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

 

And knowing how to map an array is very helpful.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

 

i'm new with javascript, just had learned java which is quite different. I still don't quite understand this concept of await. You helped me a little in this regard. I will study what you told me. Thank you!

 

 

 

[Draggable attached to last element only]

here

See the Pen XWWNamR?editors=0010 by j-natas-dp (@j-natas-dp) on CodePen

 

i've already lost several hours in this i feel so stupid man

[Draggable attached to last element only]

[Draggable attached to last element only]

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).

[Draggable attached to last element only]

1 hour ago, Jônatas said:

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.

 

See the Pen OJJbgMv by j-natas-dp (@j-natas-dp) on CodePen

 

in the code pen dont work at all.

I made in angular, there any problem?

[Draggable attached to last element only]

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.