如何在拖放方法中创建D3 svg元素

Question

我有一个使用html和SVG canvas的托盘部分。我想在点击一个按钮时创建SVG元素并将其粘贴到SVG中的拖放方法。我的托盘部分我这样创建

<div id="toolbox">
      <input id="task-button" type="image" title="Activity" src="img/rec.png" alt="Activity">
    </div>

按下按钮

时，我会创建这样的SVG元素

d3.select("#task-button").on("click", function(){
var sampleSVG = svg;
       sampleSVG.append('rect')
       .attr('id', 'task'+(++idtaskelement))
          .style("stroke", "black")
          .style("stroke-width", "2")
          .style("fill", "white")
          .attr('transform', 'translate(' + d3.event.pageX + ',' + d3.event.pageY+ ')')
        .attr("rx", 10)
         .attr("ry", 10)
          .attr("width", 120)
          .attr("height", 80)
          .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");
var point = d3.mouse(this)
  , p = {mx: point[0], my: point[1] };
console.log(p.mx +"and "+ p.my);
        })
          .on("mouseout", function(){d3.select(this).style("fill", "white");})
          .on("click", function(){
            tmodal.style.display = "block";
          })
          .call(drag)
    });

此元素具有我创建的拖动功能。

var drag = d3.behavior.drag().on('drag', function(d) {
   dragMove(this)
 })
function dragMove(me) {
   var x = d3.event.x
   var y = d3.event.y
   d3.select(me).attr('transform', 'translate(' + x + ',' + y + ')')
 }

是否可以调用拖动功能并在按钮单击后开始拖动，当我们在画布中单击时，我们可以将其粘贴到画布中。 如果有任何方法可以执行此功能，请告诉我。