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 = new SVG('svg-container').size(400, 400); var rect = draw.rect(100, 100); rect.draggy();
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.on('dragstart', function(event) { // Do something });
beforedrag
rect.on('beforedrag', function(event) { // Do something });
dragmove
rect.on('dragmove', function(event) { // Do something });
Constraint
The drag functionality can be limited within a given box. You can pass the the constraint values as an object:
rect.draggy({ minX: 10, minY: 15, maxX: 200, maxY: 100 });
For more dynamic constraints a function can be passed as well:
rect.draggy(function(x, y) { return { x: x < 1000, y: y < 300 }; });
With this you can also easily achieve some snapping functionality:
var snapRange = 50; rect.draggy(function (x, y, elem) { var res = {}; res.x = x - (x % snapRange); res.y = y - (y % snapRange); return res; });
Remove
The draggable functionality can be removed with the fixed()
method:
rect.fixed();
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 = SVG('paper').attr('viewBox', '0 0 150 100').size(600, 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].
📜 License
MIT © [jillix][website]
[website]: [contributing]: /CONTRIBUTING.md [docs]: /DOCUMENTATION.md