Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
OrganicPixels

Draggable in a SPA

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

Hi everyone,

Not necessarily having a problem with code to fix but need suggestions on how to approach an issue.

 

I'm working in a mobile application that's running Knockout to create a SPA.  I'd like to use draggable to handle the mobile support of dragging since it does so well.  However, the nature of my problem is dom injection.  

 

Draggable looks for an element selector on page load to create it's logic.  However in the SPA architecture elements are dynamically added and removed to the dom based on user interaction.  I'm trying to find a way that I could create a generic class which if used would automatically make the element scrollable.

 

I was thinking of something along the lines as 

Draggable.create(".scroll-container", {type:"scrollTop", edgeResistance:0.5, throwProps:true});

This works the way I want it if the element is already in the DOM.  Is there a way I could have this function look for .scroll-container to show up in the DOM?

 

Not sure if this is a GreenSock question or not. gonna check on Knockout forums as well but I have to assume this is an issue others have run into and felt it was worth checking here.

 

Link to comment
Share on other sites

Hmm I'm really not sure there is an easy solution for that. Draggable finds its targets when you call create. It doesn't keep searching the Dom for new elements and I don't think that is something we could easily add.

  • Like 1
Link to comment
Share on other sites

Hello,

You can look into using the MutationObserver API. It is native vanilla JavaScript.

  • MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.

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

 

Great browser support IE9+, Firefox, and Webkit based browsers like Chrome, Safari and Opera.

 

Couldn't you just call the Draggable create() method after you insert the new element in the DOM. But if it was me I would just simply call Draggable.create() on the new element after you insert in the DOM.

But that is my two cents. :)

  • Like 2
Link to comment
Share on other sites

Guys, 

Thanks so much for all the feedback.  I think Blake may have the solution but if not the MutationObserver looks very promising.  Thank you all so much for the guidance! 

  • Like 1
Link to comment
Share on other sites

I just did this very thing.   I simply added the draggable code to the file of each jquery module I was creating dynamically (in this case bootstrap cards) instead of on the SPA template page.  I referenced the class .cards though so I imagine that it would work on multiple items with the same class generated by the same javascript file (you will have to excuse me if I am using noob language to describe this. I have only just started coding)

 

i am not sure if this is a redundant solution, but it is a solution.

 

My problem is using trigger to the header class or even to a local header id.  No matter what i do as soon as I use trigger if i pick up one item I pick up them all that are present. 

Link to comment
Share on other sites

 

My problem is using trigger to the header class or even to a local header id.  No matter what i do as soon as I use trigger if i pick up one item I pick up them all that are present. 

 

This is most likely due to the scope of your js.  Ideally I'd create it in a constructor function but you may have an "out of the box" solution like the one Blake demonstrated depending on your SPA framework.

Link to comment
Share on other sites

Here's a nice, but somewhat complicated example of creating Draggable instances in a SPA (Angular + Firebase). I create them in a constructor function, just like @OrganicPixels mentioned... sort of. It gets deferred because it has to connect to the database first.

See the Pen gPeeJN?editors=0010 by osublake (@osublake) on CodePen

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