How to drag an svg group using d3.js drag behavior?
d3.js, dom, javascript, svg
Solution
First off, the <g> element doesn't care about `x`and `y` attributes (as in: they're just ignored). You can use `transform="translate(x,y)"` instead.
Second, you will need to check that the element you get in the dragmove handler actually is the <g> element, and not a child element of it. This is because <g> elements have no actual hit area themselves. Their children do though, and the mouse events first go to the children then bubble up to the parent. You can inspect `evt.target` and `evt.currentTarget` to see this in action. `target` is the element that was hit originally, `currentTarget` is the event target that is currently handling the event (e.g the <g> element if the event bubbled up).
Problem
I am using D3js drag. single element is get dragged perfectly fine. but i want to drag a group of elements.How it can be done. Here is what is on my Js Fiddle link: ``` function onDragDrop(dragHandler, dropHandler) { var drag = d3.behavior.drag(); drag.on("drag", dragHandler) .on("dragend", dropHandler); return drag; } var g = d3.select("body").select("svg").append("g") .data([{ x: 50, y: 50 }]); g.append("rect") .attr("width", 40) .attr("height", 40) .attr("stroke", "red") .attr("fill","transparent") .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }) .call(onDragDrop(dragmove, dropHandler)); g.append("text") .text("Any Text") .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }) .call(onDragDrop(dragmove, dropHandler)); function dropHandler(d) { // alert('dropped'); } function dragmove(d) { d3.select(this) .attr("x", d.x = d3.event.x) .attr("y", d.y = d3.event.y); } ``` I want to drag both rect and text simultaneously. Here is what I tried, but no luck. I think am missing something simple.