Jump to content
Search Community

How do you add / remove children from Draggable

born2net 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

I have a simple Draggable list

 

```

var selector = '.sortableList';
var sortable = document.querySelector(selector);
self.m_draggables = Draggable.create(sortable.children, {

```

 

full question also posted at:

http://stackoverflow.com/questions/42444569/how-to-add-remove-children-in-a-gsap-draggable-list

 

How do I add and remove children from the list, or better yet, how do I just append a brand new list to an existing instance of a Draggable? or, is it better to destroy rge Draggable and create a fresh one with the new set of children? and if so how?

 

Thanks for reading,

 

Sean.

Link to comment
Share on other sites

Draggable.create() is a static method that returns an array of Draggable instances, so normal array operations work there. That also means that calling create again creates a new array of new instances. 

 

To maintain a collection of Draggables that you can add and remove from, it will be easier to use the constructor and your own array.

var myDraggable = new Draggable(someElement);
myDraggablesArray.push(myDraggable);

To clean up, call .kill() on the instance in your array and then remove it from your array. Each instance also has a target property, which you can use to figure out what element is associated with that instance.

 

BTW, you'll get better support posting your questions here instead of Stackoverflow. I don't think too many people check over there for GSAP related stuff. 

.

  • Like 2
Link to comment
Share on other sites

ok I understand...

Is kill supposed to be 100% removal?

As the reason for this question is that even though I do a kill on all the draggables, I do see slowness that is happening while I scroll, as I create and destroy Draggable instance.

 

This is how i clean up:

 

this.m_draggables.forEach((drag) => {
   drag.kill()
});

 

and I do see the Draggable count going up in Chrome profiler :/

 

Is there anything else I can do to clean up more? 

 

Thanks,

 

Sean

Link to comment
Share on other sites

A demo would help because I can't tell what you're trying to do. Using the constructor creates ONE draggable instance, so you can't pass in a list of children. You can only pass in one element per instance.

 

I also can't tell what 'self' is. Yes, I know you're using it as an alias for 'this', but are you trying to adding multiple draggables to it? If so, use an array. This just reassigns your draggables property, orphaning any previous instance from your object.

self.m_draggables = new Draggable(sortable)

To create multiple draggables, use a loop.

var elements = document.querySelectorAll(".some-selector");
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];

  if (Draggable.get(element)) continue; // Already exists
  
  // Else create a new one
  self.m_draggablesArray.push(new Draggable(element));
}

There are probably better ways to track if one exists, like adding a class or attribute to your element. Just showing how you can prevent creating another instance.

  • Like 1
Link to comment
Share on other sites

I forgot to ask you this in a previous thread. You said you were doing a bunch of stuff with Angular 2 and kind of in the know, right? Well, do you know when they plan on supporting 3rd party animation libraries? I really love Angular 1 and ng-animate, but what they have going on with animations in Angular 2 is too confusing, and very limiting. I've been waiting for almost 2 years for this feature to be added, and have kind of given up hope.

  • Like 1
Link to comment
Share on other sites

As far as I know, there are no plans that I know of as ng2 provides its own internal syntax for animation.

It uses triggers and supports both declarative and API style animation.

I would love to see gsap be part of ng2, but no news on that AFAIK.

 

regards

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