QuickTip: Easy SVG Drag and Drop

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes f…


This content originally appeared on Blog and was authored by Blog

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

Did you know that you can use Draggable on SVG elements? In fact, Draggable normalizes behavior for typical DOM elements and SVG elements across all browsers. Watch how easy it is to make multiple SVG elements draggable, implement hit-testing for a drop area, and animate them with only a few lines of code!

Demo

See the Pen Draggable SVG Icons (video) by GreenSock (@GreenSock) on CodePen.

Watch the video

Feature Summary

  • 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.
  • Impose bounds - tell a draggable element to stay within a container element 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}.
  • 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)!
  • 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 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".
  • 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 - 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".
  • 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 scrolls twice as fast, etc. The closer you move toward the edge, the faster scrolling gets. See a demo here
  • Sense clicks when the element moves less than 3 pixels - a common challenge is discerning if a user intends 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" without actually moving the element. You can define a different threshold using minimumMovement config property.
  • All major browsers are supported.
View Draggable Docs Codepen Collection


This content originally appeared on Blog and was authored by Blog


Print Share Comment Cite Upload Translate Updates
APA

Blog | Sciencx (2018-04-19T13:12:24+00:00) QuickTip: Easy SVG Drag and Drop. Retrieved from https://www.scien.cx/2018/04/19/quicktip-easy-svg-drag-and-drop/

MLA
" » QuickTip: Easy SVG Drag and Drop." Blog | Sciencx - Thursday April 19, 2018, https://www.scien.cx/2018/04/19/quicktip-easy-svg-drag-and-drop/
HARVARD
Blog | Sciencx Thursday April 19, 2018 » QuickTip: Easy SVG Drag and Drop., viewed ,<https://www.scien.cx/2018/04/19/quicktip-easy-svg-drag-and-drop/>
VANCOUVER
Blog | Sciencx - » QuickTip: Easy SVG Drag and Drop. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/04/19/quicktip-easy-svg-drag-and-drop/
CHICAGO
" » QuickTip: Easy SVG Drag and Drop." Blog | Sciencx - Accessed . https://www.scien.cx/2018/04/19/quicktip-easy-svg-drag-and-drop/
IEEE
" » QuickTip: Easy SVG Drag and Drop." Blog | Sciencx [Online]. Available: https://www.scien.cx/2018/04/19/quicktip-easy-svg-drag-and-drop/. [Accessed: ]
rf:citation
» QuickTip: Easy SVG Drag and Drop | Blog | Sciencx | https://www.scien.cx/2018/04/19/quicktip-easy-svg-drag-and-drop/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts