Javascript 如何使用d3使HTML div可拖动

我的基本目标是使用d3实现。但我想先试着做一个可拖动的div。我已经能够使svg循环可拖动，并且还包括我试图以失败的相同方式使div可拖动的内容。我相信我错过了一个重要的一点，那是什么

还是使用jQuery来获得这一点更好

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

叶
var-boxWidth=600；
var-boxHeight=400；
变量框=d3。选择（'.circledemo'））
.append（'svg'）
.attr（'class'，'box'）
.attr（'width'，boxWidth）
.attr（'height'，boxHeight）
.样式（“边框”，“1px纯黑”）；
var drag=d3.drag（）
.on（'start'，函数（）{
//圆形。样式（“填充”、“红色”）；
})
.开启（“拖动”，功能（d）{
d、 x+=d3.event.dx；
d、 y+=d3.event.dy；
圆形属性（'cx'，d.x）
.attr（'cy'，d.y.）；
})
.on（'end'，函数（）{
//圆形。样式（“填充”、“红色”）；
});
var circle=box.selectAll（“.draggableCircle”）
.数据（[{x:（箱宽/2），y:（箱高/2），r:25}]）
.输入（）
.append（'svg:circle'）
.attr（'class'，'draggableCircle'）
.attr（'cx'，函数（d）{
返回'300'；
})
.attr（'cy'，函数（d）{
返回'200'；
})
.attr（'r'，函数（d）{
返回d.r；
})
.呼叫（拖动）
.样式（“填充”、“黑色”）；
var incon=d3.selectAll（“.input container”）.data（[{x:'100'，y:'200'}]）；
var dragdiv=d3.drag（）
.开启（“拖动”，功能（d）{
d、 x+=d3.event.dx；
d、 y+=d3.event.dy；
铬镍铁合金样式（“左”，d.x+“px”）。样式（“顶”，d.y+“px”）；
});
内部通话（dragdiv）；

---

试试这个

嘿，你能用d3做这个吗？@dasfdsa是的，我终于让它可以拖动了，但不记得怎么做了。它在我的源代码中的某个地方。

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';
}​