A plugin for the svgjs.com library to make the elements selectable, draggable and droppable.

Svg.draggable.js is licensed under the terms of the MIT License.

Include this plugin after including the svg.js library in your html document.

To make the element selectable

var draw = SVG('canvas').size(400, 400)
var rect = draw.rect(100, 100)

rect.selectable()

Now the rect is selectable

To make an element draggable

var draw = SVG('canvas').size(400, 400)
var rect = draw.rect(100, 100)

rect.draggable(10)

Yes indeed, that's it! Now the rect is draggable. The draggable function takes an optional argument, stickyRadius, 10 in the example above, which specifies how much the element resists unintended dragging, in pixels.

To make an element dropable

var draw = SVG('canvas').size(400, 400)
var rect = draw.rect(100, 100)

rect.draggable().dropable()

Now the rect is draggable and dropable.

To make an element a drop target

var draw = SVG('canvas').size(400, 400)
var rect = draw.rect(100, 100)
var bigrect = draw.rect(200, 200).move(200,200)

rect.droptarget()

Now the bigrect is a drop target.

There are ten different callbacks available, select, unselect, beforedrag, dragstart, dragmove, dragend, dragover, dragenter, dragleave and drop.

Two callbacks, select and unselect are available on the selectable elements.

rect.select = function() {
  ...do your thing, like coloring the element in a different color...
}

Four of the callbacks, beforedrag, dragstart, dragmove and dragend are available on the draggable element. This is how you assign them:

rect.dragstart = function() {
  ...do your thing...
}

The beforedrag callback will pass the event in the first argument:

rect.beforestart = function(event) {
  ...do your thing...
}

The dragstart callback will pass the delta values as an object in the first argument and the event as the second:

rect.dragstart = function(delta, event) {
  console.log(delta.x, delta.y)
}

The dragmove and dragend callbacks will pass the delta values as an object in the first argument, the event as the second and the target element as the third. The target element is a drop target element that is under the element being dragged:

rect.dragmove = function(delta, event, target) {
  console.log(delta.x, delta.y)
}

The other four callbacks, dragover, dragenter, dragleave and drop, are invoked on the droptarget elements. Two parameters are passed to the callbacks - the event and the element being dragged. Dropable elements generate these callbacks when dragged over a droptarget element.

rect.dragenter = function(event, element) {
  ...do your thing...
}

The drag functionality can be limited within a given box. You can pass the the constraint values as an object:

rect.draggable({
  minX: 10
, minY: 15
, maxX: 200
, maxY: 100
})

The draggable functionality can be removed with the fixed() method:

rect.fixed()

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)

This module requires svg.js v0.11.