Search the Community

#container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color:#555; margin: 0 0 10px 0; } #container a { color:#71b200; } #container .normalBullets code { font-size: inherit; color: inherit; font-weight: normal; line-height: inherit; font-family: inherit; } #container .normalBullets li strong { font-size: 110%; } #container .normalBullets li { margin-bottom:8px; } #container .blackBG h1, #container .darkBG h1 { color: #ddd; text-shadow: none; } #container .blackBG p { color: #999; } #container .section { width: 100%; text-align: center; position: relative; padding: 20px; } /* .block was causing conflict with wp theme --- renamed below */ #container .customblock { padding: 10px; text-align: left; position: relative; } #container .blackBG { background-color: black; } #container .lightBG { background-color: #e4e4e4; } #container .subtleDark { color: #999; text-shadow: none; } #container .blackBG p strong { color:#ddd; font-weight: normal; } /** CODE **/ #container .code { width: 100%; border: 1px solid #555; padding: 0; margin: 20px 0; } #container .code pre.prettyprint { margin:0; overflow: auto; } #container .codeTitle { color: #aaa; background-color: #111; padding: 8px; font-size:18px; border-bottom: 1px solid #555; } #container code, #scroller code { color: black; font-size: 16px; } #container .blackBG code, #container .darkBG code { /* carl removed color: #ccc; */ } #container pre { font-size: 1.1em; padding:8px; background-color:#333; color:white; border: 1px solid #777; } /** TOSS **/ #container .box { background-color: #91e600; text-align: center; font-family: Asap, Avenir, Arial, sans-serif; width: 196px; height: 100px; line-height: 100px; overflow: hidden; color: black; position: absolute; top:0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /** SCROLL **/ #scrollContainer { position:relative; height: 370px; } #scroller { top:20px; left:10%; position:absolute; width:80%; height:280px; overflow:scroll; background-color:#ddd; padding:25px; color:#333; border:4px solid #999; } #scroller * { box-sizing: content-box; } #scroller p { color: #444; } #scroller p strong { color:#111; } #container .controls { background-color: #222; border: 1px solid #555; color: #bbb; font-size: 18px; } #container .controls ul { list-style: none; padding: 0; margin: 0; } #container .controls li { display: inline-block; padding: 8px 0 8px 10px; margin:0; } /** BUTTONS **/ #container .button { display:inline-block; border-radius:8px; border-bottom-width: 2px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.6), 0px 3px 6px 0px rgba(0, 0, 0, 0.6); cursor:pointer; text-align: center; font-family: Signika Negative, Asap, Avenir, Arial, sans-serif; position:relative; margin: 4px; color:black; } #container .largeButton { padding: 12px 24px; font-size: 20px; margin: 12px 8px; min-width:110px; } .greenGradient { border: 1px solid #6d9a22; background-color: #699a18; background: linear-gradient(to bottom, #8cce1e 0%,#699a18 52%,#639314 53%,#76b016 100%); /* W3C */ text-shadow: 1px 1px 2px #384d16; color:#fff; text-decoration: none; } /** EXPANDABLE POINTS (FAQ) **/ .expPoint, .expList li { list-style: none; line-height: normal; margin: 0 0 0 8px; padding: 6px 4px 4px 24px; position:relative; border: 1px solid rgba(204,204,204,0); font-size: 110%; color: #111; font-weight: normal; } .expPoint, .expContent { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; line-height: 140%; } .expPoint:hover, .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0; overflow: hidden; color: #444; margin: 2px 0 0 0; padding-top: 0; font-size:16px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } .arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #999; display:inline-block; margin: -4px 8px 0 -14px; vertical-align: middle; opacity:0.8; } .tableCellDesktop { display: table-cell; } .tableCellDesktop img { left: 120px; } @media screen and (max-width: 860px) { .tableCellDesktop { display: block; } .tableCellDesktop img { left: 0px; } } When you pair GreenSock's Draggable with ThrowPropsPlugin, 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 ThrowPropsPlugin 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 Snap end position to grid Live snap Lock axis Code Draggable.create(".box", { type: "x,y", edgeResistance: 0.65, bounds: "#container", throwProps: true }); Spin Set Draggable's type to "rotation" and watch what happens (grab the knob below and spin it). ThrowPropsPlugin 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. Snap to 90-degree increments Code Draggable.create("#knob", {type: "rotation", throwProps: true}); Scroll (Drag & Flick) Draggable can even be used to control the scrollTop and/or scrollLeft properties of an element, complete with overscrolling, snap-back, momentum continuation, and edge resistance. It's as simple as changing the type to "scroll". And Draggable doesn't use artificial scrollbars like some other tools - it uses native scrolling with the standard OS/browser scrollbar UI. Play with the demo below and see for yourself. Drag me to scroll me Click and drag this content and then let go as you're dragging to throw it. Notice how it smoothly glides to a rest, respecting the initial velocity and even permitting overscolling with bounce-back without forcing fake/simulated scrollbars. It's actually using the scrollTop or scrollLeft of the container, and then if/when it exceeds the bounds, it'll apply a translate3d() transform for hardware-accelerated performance, and it'll even fall back to using padding when 3D transforms aren't available. Yes, it even works in IE8! How does it work? When you create the Draggable with type:"scroll" (or "scrollTop" or "scrollLeft"), it will create a div and wrap it around the native content of the target element so that it can move things appropriately. So that wrapper div ends up being the only child of the element. Then, as you drag, it updates the scrollTop/scrollLeft of the element until you exceed the bounds at which time it'll either add a translate3d() CSS transform (if supported) to that wrapper div or fall back to using padding for older browsers. This gives you the best of both worlds - it delivers native scrolling with normal scrollbar UI that's built into the OS/browser, plus outstanding performance on mobile devices due to the translate3d() sweetness on overscroll, and compatibility even with IE8, all in a 3.4k gzipped footprint (not including TweenLite or CSSPlugin which are required). Oh, and don't forget the kinetic-based flick scrolling that's enabled when you load ThrowPropsPlugin and set throwProps:true in the config object. When you drag past the normal scrolling limits, the edgeResistance kicks in (you control how much). It just "feels" natural and fluid, much more so than most other options out there. Did we mention Draggable works great with touch events too? And if the user flick-scrolls and then while it's animating, they use their mouse wheel or grab the scrollbar to take control themselves, Draggable automatically releases control and stops the animation. Don't worry your pretty little head. Usage Setup is a breeze. One line is all you need: Draggable.create("#container", {type:"scroll", throwProps:true, edgeResistance:0.35}); That's it! Of course you can tweak the configuration however you please. Want to only scroll vertically? Use type:"scrollTop". Or for horizontal scrolling, use type:"scrollLeft". When you use simply type:"scroll", it allows scrolling in either direction. Change the edgeResistance to 1 if you don't want the user to be able to drag past the edge. Note that ThrowPropsPlugin is a membership benefit of Club GreenSock ("Shockingly Green" and "Business Green" levels), but the Draggable works fine without that - you just won't get the kinetic-based motion. You can still drag things. Not just for scrolling As you can see from the examples above, Draggable is multi-talented. Change the type to "x,y" to make the entire object draggable around the screen (literally moving it, not scrolling). Or type:"top,left" does the same thing, but uses the "top" and "left" css properties instead of translateX() and translateY() CSS transforms. Or if you want to be able to drag-spin an object, use type:"rotation". In fact, it'll even honor the transform-origin of the element. Options type: scroll scrollTop scrollLeft top,left top left x,y x y rotation edgeResistance: 0 0.1 0.25 0.5 0.75 1 throwProps (kinetic motion) lock axis Code Draggable.create("#scroller", {type:"scroll", edgeResistance:0.5, throwProps: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 ThrowPropsPlugin loaded, you can simply set throwProps: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 ThrowPropsPlugin)! 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 TweenLite.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 ThrowPropsPlugin (for the momentum-based features), join Club GreenSock today. You'll be glad you did. If not, we'll gladly issue a full refund.