Share Posted September 23, 2016 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 More sharing options...
Share Posted September 24, 2016 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. 1 Link to comment Share on other sites More sharing options...
Share Posted September 24, 2016 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 2 Link to comment Share on other sites More sharing options...
Share Posted September 24, 2016 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. 2 Link to comment Share on other sites More sharing options...
Share Posted September 25, 2016 Also, can you trigger an event after SPA gets added. Link to comment Share on other sites More sharing options...
Author Share Posted September 27, 2016 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! 1 Link to comment Share on other sites More sharing options...
Share Posted September 27, 2016 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 More sharing options...
Author Share Posted September 29, 2016 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 More sharing options...
Share Posted September 30, 2016 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now