Jump to content
GreenSock

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

| GreenSock
600837

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 ]


Drag and throw me
Drag and throw me too

  • Options

Code
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.



Code
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, Draggable just 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: true in 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 like bounds:{top:100, left:0, width:1000, height:800} or specific maximum/minimum values like bounds:{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:true and 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 the type ("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 transformOrigin to something else to make the pivot point be elsewhere. For example, if you call gsap.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, and onClick. 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:1 for normal-speed auto scrolling, or autoScroll:2 would 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 minimumMovement config property, like minimumMovement:6 for 6 pixels.
  • All major browsers are supported including IE9+. IE8 lacks hitTest() support.

See full documentation here. See our Codepen Draggable Collection here. 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.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock


User Feedback

Recommended Comments



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×