Appending element clone to svg group in d3js

Question

I am able to append a rectangle to group on drag drop but it is not working properly. If I drag and drop multiple rectangles on to group, the rectangles are dislocated at different location. I am sure there must be some thing wrong.

Demo: http://jsfiddle.net/wqvLLbLa/

code:

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

                var rect = svgContainer.append("rect")
                        .attr("x", 10)
                        .attr("y", 50)
                        .attr("width", 51)
                        .attr("height", 41)
                        .attr("rx", 10)
                        .attr("stroke-width", 2)
                        .attr("stroke", "#7E7E7E")
                        .style('cursor', 'move')
                        .style("fill", "white");

                function moveRect() {
                    d3.select(this)
                            .attr('x', d3.event.x)
                            .attr('y', d3.event.y);
                }

                var dragGroup = d3.behavior.drag()
                        .origin(function () {
                            var g = this;
                            return {x: d3.transform(g.getAttribute("transform")).translate[0],
                                    y: d3.transform(g.getAttribute("transform")).translate[1]};
                        })
                        .on("drag", function (d, i) {
                            g = this;
                            translate = d3.transform(g.getAttribute("transform")).translate;
                            console.log(translate);
                            x = d3.event.dx + translate[0],
                            y = d3.event.dy + translate[1];
                            d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                            d3.event.sourceEvent.stopPropagation();
                        });

                var group = svgContainer.append("g")
                        .attr("id", "mygroup")
                        .call(dragGroup)
                        .style('cursor', 'move')
                        .attr("transform", "translate(20, 20)");

                group.append("rect")
                        .attr("x", 250)
                        .attr("y", 250)
                        .attr("width", 151)
                        .attr("height", 141)
                        .attr("rx", 10)
                        .attr("stroke-width", 2)
                        .attr("stroke", "#7E7E7E")
                        .style("fill", "white");

                var circleDrag = d3.behavior.drag()
                        .origin(function ()
                        {
                            var t = d3.select(this);
                            return {x: t.attr("cx"), y: t.attr("cy")};
                        })

                var rectDrag = d3.behavior.drag()
                        .origin(function ()
                        {
                            var t = d3.select(this);
                            return {x: t.attr("x"), y: t.attr("y")};
                        })

                        .on('dragend', function (d) {
                            var mouseCoordinates = d3.mouse(this);
                            var groupTransform = d3.transform(group.attr("transform"));
                            var groupX = groupTransform.translate[0];
                            var groupY = groupTransform.translate[1];
                            var rect = group.select("rect");
                            var rectX = +rect.attr("x");
                            var rectY = +rect.attr("y");
                            var rectWidth = +rect.attr("width");
                            var rectHeight = +rect.attr("height");

                            if (mouseCoordinates[0] > groupX + rectX
                                    && mouseCoordinates[0] < groupX + rectX + rectWidth
                                    && mouseCoordinates[1] > groupY + rectY
                                    && mouseCoordinates[1] < groupY + rectY + rectHeight) {

                                //Append new element
                                var newRect = d3.select("g").append("rect")
                                        .classed("drg", true)
                                        .attr("x", 100)
                                        .attr("y", 100)
                                        .attr("rx", 10)
                                        .attr("width", 51)
                                        .attr("height", 41)
                                        .attr("x", mouseCoordinates[0])
                                        .attr("y", mouseCoordinates[1])
                                        .style("fill", "white")
                                        .style("stroke-width", 2)
                                        .style("stroke", "#CDB483");
                            }
                            else
                            {
                                var newRect = d3.select("svg").append("rect")
                                        .classed("drg", true)
                                        .attr("x", 100)
                                        .attr("y", 100)
                                        .attr("rx", 10)
                                        .attr("width", 51)
                                        .attr("height", 41)
                                        .attr("x", mouseCoordinates[0])
                                        .attr("y", mouseCoordinates[1])
                                        .style("fill", "white")
                                        .style("stroke-width", 2)
                                        .style("stroke", "#CDB483")
                                        .call(
                                                d3.behavior.drag()
                                                .on('drag', moveRect).origin(function () {
                                            var t = d3.select(this);
                                            return {x: t.attr("x"), y: t.attr("y")};
                                        }));
                            }
                        });
                rect.call(rectDrag);

Answer 1

Responding to the update question - as in the comments.

The reason for the duplicates is because you are appending a new element to the targetG after your bounds check, instead of targetCircle.

The easiest way to fix this would be to simply remove targetCircle after appending the new circle like so

targetCircle.remove();

---

Fiddle - http://jsfiddle.net/afmLhofL/