Javascript 如何通过拖放创建形状

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

以下是我尝试过的：

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

---

我不知道该如何创建拖放功能

你应该仔细阅读d3的阻力特性。这比把jQueery和d3混在一起要好得多。这里有很多例子可以让你继续。@coolblue，但我实际上并没有在这里拖动任何形状，我试图在拖动端创建一个形状。PNG图像在拖动时显示透明图像，在拖动结束时，我想根据鼠标位置创建一个形状。是的，我明白了，d3拖动行为可以附加到主体或一些背景画布或任何东西上，你可以使用它的拖动事件。你应该阅读d3拖动行为。这比把jQueery和d3混在一起要好得多。这里有很多例子可以让你继续。@coolblue，但我实际上并没有在这里拖动任何形状，我试图在拖动端创建一个形状。PNG图像在拖动时显示透明图像，在拖动结束时，我想根据鼠标位置创建一个形状。是的，我明白了，d3拖动行为可以附加到主体或一些背景画布或任何东西上，您可以使用它的dragend事件。