d3.js - drag circle copies from different svgs to another svg in d3 -

d3.js - drag circle copies from different svgs to another svg in d3 -

i have different svgs (svg1-svg4) several circles drawn on them. can select these circles individually appearance changes (fill color). they're added class .selected.

now drag semi-transparent copies of them new svg. original circles should remain are. provide interactive ability create new object on svg (svg5) dragging number of circles onto svg5. when they're dropped, copies of circles should deleted , prompt should open user can give more info new object in svg5.

therefore created new svg (called svgcircles). on svgcircles, added grouping g append circle re-create when circle selected. added drag behavior grouping calls function alter position of g element/the circle copies.

my question now: should position svg drag-event noticed , function called? thought putting on same position of circle clicked (but transparent) drag work if started dragging on lastly selected circle (which not want). should work selected circles.

all functions work when set svg "below" others on body , drag it. svg should "fly" above others when drag it. don't want set in on other svgs(1-4) because hidden when dragged on other svgs.

i'm sorry can't provide cody here because rather theoretical question. hope have made myself clear enough, though.

i love know ideas/solutions! thanks!

svg d3.js drag