How to make a HTML div draggable using d3
<p>My basic objective is to implement <a href="http://comexile.blogspot.com/2016/08/simple-mapping-tool-with-jsplumb.html" rel="nofollow">this type of a simple mapper</a> using d3. But I want to first try and make a div draggable. I have been able to make an svg circle draggable and <a href="https://jsfiddle.net/sachid/1oyo1h9L/" rel="nofollow">this JSFiddle</a> also includes what I tried to make the div draggable in the same way which fails. I believe I am missing an important point here, what is it?</p>

<p>Or is it better to use jQuery to gain this?</p>

<pre><code> &lt;div class="input-container"&gt;
            &lt;div class="in-leaf"&gt;In-leaf&lt;/div&gt;
            &lt;div class="in-icon"&gt;&lt;img src="../assets/application/images/arrow-head.png"&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="circledemo"&gt;

        &lt;/div&gt;


        &lt;script type="text/javascript"&gt;


            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:circle')
                    .attr('class', 'draggableCircle')
                    .attr('cx', function (d) {
                        return '300';
                    })
                    .attr('cy', function (d) {
                        return '200';
                    })
                    .attr('r', function (d) {
                        return d.r;
                    })
                    .call(drag)
                    .style('fill', 'black');

            var incon = d3.selectAll(".input-container").data([{x:'100',y:'200'}]);
            var dragdiv = d3.drag()
                    .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');
                    });

            incon.call(dragdiv);


        &lt;/script&gt;
</code></pre>