svg.draggy.js
A JavaScript library for dragging SVG things.
Usage
Include this library after including svg.js
in your html document. Here you can see a demo.
To make an element draggable, just do:
var draw = 'svg-container'size400 400;var rect = draw; rect;
Yes indeed, that's it! Now the rect
is draggable. ✨
Events
There are four different events available you can llisten to: beforedrag
, dragstart
, dragmove
and dragend
. This is how you assign them:
The event
object has some custom data added by this library:
-
event.detail.delta
is an object containing:x
andy
: The element coordinates.movedX
andmovedY
: The element total movement values (available only indragmove
event).
-
event.detail.event
is an object containing the original event
dragstart
rect;
beforedrag
rect;
dragmove
rect;
Constraint
The drag functionality can be limited within a given box. You can pass the the constraint values as an object:
rect;
For more dynamic constraints a function can be passed as well:
rect;
With this you can also easily achieve some snapping functionality:
var snapRange = 50;rect;
Remove
The draggable functionality can be removed with the fixed()
method:
rect;
Viewbox
This plugin is viewBox aware but there is only one thing that you need to keep in mind. If you work with a viewBox on the parent element you need to set the width and height attributes to have the same aspect ratio. So let's say you are using viewbox='0 0 150 100'
you have to make sure the aspect ratio of width
and height
is the same:
var draw = size600 400;
☁️ Installation
Check out the src
directory to download the needed files and include them on your page.
If you're using this module in a CommonJS environment, you can install it from npm
and require
it:
$ npm i --save svg.draggy.js
📝 Documentation
draggy(constraint)
Makes an element draggable.
Params
- Object|Function
constraint
: An object containing the constraint values or a function which gets thex
andy
values and returns a boolean or an object containing thex
andy
boolean values.false
skips moving whiletrue
allows it.
Return
- SVG The SVG element.
😋 How to contribute
Have an idea? Found a bug? See [how to contribute][contributing].