如何在拖放上创建形状

Question

我可以在mousedown上创建一个形状，但是如何在拖放上创建。基本上应该在mouseup坐标上创建一个看起来像拖放的形状。

http://jsfiddle.net/o8ubr3e7/7/

以下是我的尝试：

var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 800)
                        .attr("height", 803);

            var clientX;
            var clientY;
            var offsetX;
            var offsetY;
            var x, y;
            var shapeId;

            $('body').on('mousemove', function (event)
            {
                var $stageContainer = $("#content");
                var stageOffset = $stageContainer.offset();
                clientX = event.clientX;
                clientY = event.clientY;
                console.log("ClientXY: " + clientX + " " + clientY);
                offsetX = stageOffset.left;
                offsetY = stageOffset.top;
                console.log("Offsets: " + offsetX + " " + offsetY);
                x = clientX - offsetX;
                y = clientY - offsetY;
                console.log("mouse moved: " + x + " " + y);
            });

            function getId(Id) {
                $('#content div:first a').on("mousedown", function (event) {
                    shapeId = this.id;
                    console.log(shapeId);
                })
            }
            getId();

            $('body').on('mouseup', function ()
            {
                if (shapeId === "newTask")
                {
                    console.log("shape is", shapeId);
                    createRect(x, y);
                }
            })

                function createRect(x,y) {
                    svg.append("rect")
                            .attr("id", "onRectDragStart")
                            .attr("rx", 10)
                            .attr("width", 51)
                            .attr("height", 41) 
                            .attr("x", x)
                            .attr("y", y)
                            .attr("stroke-width", 2)
                            .attr("stroke", "#7E7E7E")
                            .style('cursor', 'move')
                            .style("fill", "white")
                            .classed("dragTarget", true)
                }

我无法确定如何创建拖放功能。