Question

我想在内部div元素上调用dram函数，我希望拖动父<g>及其内容。如何实现这一目标？

我想这不起作用，因为<g>只是一个分组元素而不是容器。

变形有效但行为有趣，为什么？

<g  id="input-container">  
    <foreignObject x="10" y="10" width="200" height="400" 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">Input</div>
        </div>
    </foreignObject>
</g>
<script>
    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("#output-container-div").call(dragcontainer);
</script>

Answer 1

<g  id="input-container">  
  <foreignObject x="10" y="10" width="200" height="400" 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">Input</div>
   </div>
 </foreignObject>
</g>

如果＆＃34; container-div-title＆＃34;是事件发生的分区然后你应该尝试

this.parentElement.parentElement.parentElement

不是刚刚删除的父元素，用于适当的事件发生元素

d3让一个小组可以拖动

1 个答案: