d3 draggable div

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="input-container">
  <div class="in-leaf">In-leaf</div>
  <div class="in-icon"><img src="../assets/application/images/arrow-head.png"></div>
</div>

<div class="circledemo">

</div>

CSS

.input-container {
   padding: 10px;
   margin: 50px;
   width: 60%;
   border: 1px solid black;
 }
 
 .input-container div {
   margin: auto;
   display: inline-block;
 }
 
 .in-icon {
   float: right;
 }

JavaScript

var boxWidth = 600;
  var boxHeight = 400;

  var box = d3.select('.circledemo')
    .append('svg')
    .attr('class', 'box')
    .attr('width', boxWidth)
    .attr('height', boxHeight)
    .style("border", "1px solid black");


  var drag = d3.drag()
    .on('start', function() {
      // circle.style('fill', 'red');
    })
    .on("drag", function(d) {
      d.x += d3.event.dx;
      d.y += d3.event.dy;
      circle.attr('cx', d.x)
        .attr('cy', d.y);
    })
    .on('end', function() {
      // circle.style('fill', 'red');
    });

  var circle = box.selectAll('.draggableCircle')
    .data([{
      x: (boxWidth / 2),
      y: (boxHeight / 2),
      r: 25
    }])
    .enter()
    .append('svg:div')
    .attr('class', 'draggableCircle')
        .style('fill', 'black')
    .text('aaa');
    .call(drag)


  var incon = d3.selectAll(".input-container").data([{
    x: '100',
    y: '200'
  }]);
  var dragdiv = d3.drag()
    .on('start', function() {
      // circle.style('fill', 'red');
    })
    .on("drag", function(d) {
      d.x += d3.event.dx;
      d.y += d3.event.dy;
      incon.style("left", d.x + 'px').style("top", d.y + 'px');
    })
    .on('end', function() {
      // circle.style('fill', 'red');
    });
  incon.call(dragdiv);