When you pair GreenSock's Draggable with InertiaPlugin, you get the ultimate tag-team for making a DOM element draggable, spinnable, tossable, and even flick-scrollable! You can impose bounds, complex snapping rules, and have things glide to a stop in a silky-smooth way, all with as little as one line of code! No kidding. Works great on touch devices too. Below you'll find 3 examples of what Draggable can do when it's got some InertiaPlugin love under the hood. Check out the code samples too (they auto-update as you change options).
Throw
By default, Draggable uses type:"x,y" meaning it'll use css transforms for positional movement (hardware accelerated when possible).
Activate the some of the snapping options below and watch how nicely things glide into place exactly on the grid or snap into place as you drag. Notice the edge resistance as you try
to drag past the edges; everything is configurable. [ View this on CodePen.io ]
- Options
Draggable.create(".box", {
type: "x,y",
edgeResistance: 0.65,
bounds: "#container",
inertia: true
});
Spin
Set Draggable's type to "rotation" and watch what happens (grab the knob below and spin it). InertiaPlugin tracks the velocity of the rotation and continues when you release your mouse (or finger for touch devices), gliding to a stop naturally. Activate the "Snap to 90-degree increments" option to see how easy it is to make it always land at certain rotational values without any jerking or awkwardness.
Draggable.create("#knob", {type: "rotation", inertia: true});
Features
- Touch enabled - works great on tablets, phones, and desktop browsers.
-
Incredibly smooth - GPU-accelerated and requestAnimationFrame-driven for ultimate performance. Compared to other options out there,
Draggablejust feels far more natural and fluid, particularly when imposing bounds and momentum. -
Momentum-based animation - if you have InertiaPlugin loaded, you can simply set
inertia: truein the config object and it'll automatically apply natural, momentum-based movement after the mouse/touch is released, causing the object to glide gracefully to a stop. You can even control the amount of resistance, maximum or minimum duration, etc. - Complex snapping made easy - snap to points within a certain radius (see example), or feed in an array of values and it'll select the closest one, or implement your own custom logic in a function. Ultimate flexibility. You can have things live-snap (while dragging) or only on release (even with momentum applied, thanks to InertiaPlugin)!
-
Impose bounds - tell a draggable element to stay within the bounds of another DOM element (a container) as in
bounds:"#container"or define bounds as coordinates likebounds:{top:100, left:0, width:1000, height:800}or specific maximum/minimum values likebounds:{minRotation:0, maxRotation:270}. -
Sense overlaps with hitTest() - see if one element is overlapping another and even set a tolerance threshold (like at least 20 pixels or 25% of either element's total surface area) using the super-flexible
Draggable.hitTest()method. Feed it a mouse event and it'll tell you if the mouse is over the element. See http://codepen.io/GreenSock/pen/GFBvn for a simple example. -
Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - it's as simple as
trigger:"#topBar", for example. -
Drag position, rotation, or scroll - lots of drag types to choose from:
"x,y"|"top,left"|"rotation"|"scroll"|"x"|"y"|"top"|"left"|"scrollTop"|"scrollLeft" -
Lock movement along a certain axis - set
lockAxis:trueand Draggable will watch the direction the user starts to drag and then restrict it to that axis. Or if you only want to allow vertical or horizontal movement, that's easy too using thetype("top","y"or"scrollTop"only allow vertical movement;"x","left", or"scrollLeft"only allow horizontal movement). -
Rotation honors transform origin - by default, spinnable elements will rotate around their center, but you can set
transformOriginto something else to make the pivot point be elsewhere. For example, if you callgsap.set(yourElement, {transformOrigin:"top left"})before dragging, it will rotate around its top left corner. Or use % or px. Whatever is set in the element's css will be honored. -
Rich callback system and event dispatching - you can use any of the following callbacks:
onPress,onDragStart,onDrag,onDragEnd,onRelease,,onLockAxis, andonClick. Inside the callbacks,"this"refers to the Draggable instance itself, so you can easily access its "target" or bounds, etc. If you prefer event listeners instead, Draggable dispatches events too so you can do things likeyourDraggable.addEventListener("dragend", yourFunc); - Works great with SVG
- Even works in transformed containers! Got a Draggable inside a rotated/scaled container? No problem. No other tool handles this properly that we've seen.
-
Auto-scrolling, even in multiple containers - set
autoScroll:1for normal-speed auto scrolling, orautoScroll:2would scroll twice as fast, etc. The closer you move toward the edge, the faster scrolling gets. See a demo here (added in version 0.12.0) -
Sense clicks when the element moves less than 3 pixels - a common challenge is figuring out when a user is trying to click/tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a "click" and the onClick callback will be called (and a "click" event dispatched) without actually moving the element. You can define a different threshold using
minimumMovementconfig property, likeminimumMovement:6for 6 pixels. - All major browsers are supported including IE9+. IE8 lacks hitTest() support.
Demos
To get InertiaPlugin (for the momentum-based features), join Club GreenSock today. You'll be glad you did. If not, we'll gladly issue a full refund. To learn how to include Draggable and InertiaPlugin into your project, see the GSAP install docs.
-
2
-
1
Showcases
.png.fc7f258b568e575135fbb300dc15f43d.png)
.png.83e30a42c6f8ac739282203dd8f15bb9.png)
With great power comes great responsibility. Tween wisely.
- Team GreenSock
Recommended Comments
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