Search the Community

This is kind of a follow up to my response about Draggable being an excellent tool for handling different types of mouse and touch interactivity. https://greensock.com/forums/topic/12477-inspiring-html5-banner-examples-with-gsap/?p=68431 I would love to see Draggable expand out to support more types of interactivity, like with gestures. Development for Hammer.js has been on the decline for some time now, and there's not a lot of other options. Interact.js is probably the next best one. It's been around for awhile, and has all the bells and whistles, but it's not for beginners. For example, I thought the SVG demo on their site was kind of neat, so I created a version on CodePen. Check it out... http://codepen.io/osublake/pen/5008b47d7eff5ee86b30ba22cdbe4818?editors=0010 Hope you like working SVG matrices. That is definitely not something your average user would be able to figure out. With Draggable, this is all that's needed for the dragging. Draggable.create(handle, { onDrag: function() { point.x = this.x; point.y = this.y; } }); Pretty simple, right? http://codepen.io/osublake/pen/02f36f1d867ba61abff89536414f5982?editors=0010 But wait. Something's not right. It's not snapping to the points. Using the current API for Draggable, that's going to be really hard to do. I've brought up needing x/y values at the same time with the ModfiersPlugin, but Draggable really needs this. I want to build a node editor like this, with draggable nodes and port connectors. To see how xy snapping might work, I modified a line of code to pass in both values around line 1708. x = snapX({ x: x, y: y }); That's enough to hack a demo together. Check out the simple point in circle test I'm doing. Draggable needs something like that. Pass in an array of points with an optional threshold. http://codepen.io/osublake/pen/NdKvYb/?editors=0010 Now we're getting somewhere! But why stop there? It would be nice if Draggable could keep track of some additional properties, like the delta value between events. This would be crazy useful. Using the delta value, you can do stuff like move other objects alongside what you're dragging, or even mirror them, like a Bezier handle. Check it out. The only thing I'm doing is setting the x and y properties to the negative delta value. That moves it in the opposite direction. Now you can do trigonometry without trigonometry! http://codepen.io/osublake/pen/ggYxvp/?editors=0010 There's one other property that would be nice for Draggable to keep track of, and that's the last position. We already know how useful that is as that question gets asked a lot. Here's something interesting you can do using the last and delta values. Connect circles. It's done by finding the mid point, which is the average of the last and current position. The diameter of the circle is the magnitude/length of the delta The faster you drag, the larger the circles will be. It's almost like an event visualizer. http://codepen.io/osublake/pen/OWLjOy/?editors=0010 What do you think? Hopefully you won't have to chew on this for too long. Here's the draggable file I modified. https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/draggable.js And these are the changes I made. Really simple stuff. Just enough to get my demos working. // LINE 1122 this.last = { x: 0, y: 0 }; this.delta = { x: 0, y: 0 }; // LINE 1232 self.last.y = applyObj.data.y; self.delta.y = y - applyObj.data.y; // LINE 1242 self.last.x = applyObj.data.x; self.delta.x = x - applyObj.data.x; // LINE 1738 x = snapX({ x: x, y: y }); .