D3 make <g> draggable

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
<g id="input-container">
  <foreignObject x="10" y="10" width="200" height="100" id="input-container-fo" class="container-fo">
    <div xmlns="http://www.w3.org/1999/xhtml" id="input-container-div" class="container-div">
      <div class="container-div-title" id="input-container-div-title" style="border:1px dashed black">Drag me</div>
    </div>
  </foreignObject>
</g></svg>

CSS

svg{
  height:400px;
}

JavaScript

var inputoutline = d3.select("#input-container").append("rect")
  .attr("x", 100)
  .attr("y", 10)
  .attr("width", 100)
  .attr("height", 100)
  .attr("stroke", "black")
  .attr("fill", "none")
  .attr("stroke-width", "1");

var dragcontainer = d3.drag()
  .on("start", function() {})
  .on("drag", function(d, i) {
    var x = d3.event.x;
    var y = d3.event.y;
      d3.select(this.parentNode.parentNode).attr("transform", "translate(" + x + "," + y + ")");
   // d3.select(this.parentNode.parentNode).attr("x", x).attr("y", y);
  })
  .on("end", function() {});
d3.select("#input-container-div").call(dragcontainer);