Question

My basic objective is to implement this type of a simple mapper using d3. But I want to first try and make a div draggable. I have been able to make an svg circle draggable and this JSFiddle 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?

Or is it better to use jQuery to gain this?

 <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>


        <script type="text/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: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);


        </script>

Answer 1

window.onload = addListeners;

function addListeners(){
    document.getElementById('.circledemo').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);

}

function mouseUp()
{
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e){
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e){
    var div = document.getElementById('dxy');
  div.style.position = 'absolute';
  div.style.top = e.clientY + 'px';
  div.style.left = e.clientX + 'px';
}

试试这个

How to make a HTML div draggable using d3

1 个答案: