How to drag SVG with mouse?

Question

JavaScript

There is a circle on the svg canvas, how can I move it with the mouse?
Please tell me some plugin without JQ

Answer 1

ball.addEventListener('mousedown', function(evt) {
  svg.addEventListener('mousemove', drag)
})
ball.addEventListener('mouseup', function(evt) {
  svg.removeEventListener('mousemove', drag)
})
svg.addEventListener('mouseleave', function(evt) {
  svg.removeEventListener('mousemove', drag)
})

function drag(evt) {
  let x = evt.x - ball.cx.baseVal.value
  let y = evt.y - ball.cy.baseVal.value
  ball.setAttribute('transform', 'translate(' + x + ', ' + y + ')')
}

https://jsfiddle.net/Stalk/vts4dg8z/
From the libraries I can recommend d3.js and svg.js