var x = 0
  var y = 0

  var width = 400
  var height = 400
  var drag = d3.behavior.drag()
    .on('drag', dragmove)


  var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)

  svg.append('rect')
    .attr('class', 'bg')
    .attr('width', width)
    .attr('height', height)

  svg.append('rect')
    .attr('class', 'btn')
    .attr('width', 200)
    .attr('height', 50)
    .attr('transform', 'translate(' + x + ',' + y + ')')
    .call(drag)

  function dragmove () {
    var rectX = d3.transform(d3.select(this).attr('transform')).translate[0]
    var rectY = d3.transform(d3.select(this).attr('transform')).translate[1]
    var mouseX = rectX + d3.event.dx
    var mouseY = rectY + d3.event.dy
    var snappedX = Math.round(mouseX / 10) * 10
    var snappedY = Math.round(mouseY / 10) * 10

    console.log(snappedX)

    d3.select(this)
      .attr('transform', 'translate(' + snappedX + ',' + snappedY + ')')
  }