Jump to content
Search Community

Draggable attached to last element only

Jônatas test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

35 minutes ago, Jônatas said:

Where did you add? Seems the same code to me.

You can click on the cog/gear icon in the JavaScript panel to see additional resources being loaded. 

 

Can you please modify the pen that I made to recreate the situation that you're describing? You can click the "fork" button to make your own copy.

Link to comment
Share on other sites

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

 

See the Pen c7eb16604107d98f3a508798b1aa772b by osublake (@osublake) on CodePen

 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

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!

 

 

 

Link to comment
Share on other sites

37 minutes ago, Jônatas said:

I still don't quite understand this concept of await.

 

Basically the only time you would need to use await is when you need to wait for something to finish, like an image loading, getting a server response, etc.

 

The code underneath the await does not execute until the image has finished loading.

 

See the Pen c0696aaaa4be15785aadbb6b0ceb3750?editors=1111 by osublake (@osublake) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

6 minutes ago, Jônatas said:

So, is for load big things right?

 

No. It's for something that returns a Promise. await just pauses the code until the promise is finished. So it could be something really simple like setTimeout.

 

See the Pen c0696aaaa4be15785aadbb6b0ceb3750?editors=1111 by osublake (@osublake) on CodePen

 

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...