Draggable in a SPA

[OrganicPixels 6 Likes (Newbie)]

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.

 

[Carl 9,066 Likes (Superhero)]

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.

[OSUblake 9,990 Likes (Superhero)]

You need to setup some bindings. I really don't remember how to use Knockout, but something like this. That's about all the support I can offer.

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

[Jonathan 5,176 Likes (Superhero)]

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.

[Vic_ 6 Likes (Newbie)]

Also, can you trigger an event after SPA gets added.

[OrganicPixels 6 Likes (Newbie)]

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! 

[christie-g 0 Likes (Newbie)]

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. 

[OrganicPixels 6 Likes (Newbie)]

 

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.

[OSUblake 9,990 Likes (Superhero)]

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