Multiple drag functions on d3 force drag layout

Question

I have the following layout:

• Gray side : the main container (zoom, pan)
• White circles : d3 nodes ( mousedown , mouseup , drag )
• Red rectangles : rectangles ( drag , without container panning)

When dragging the red rectangles, I don't want to drag the main container too.

Also, when zooming, they should'n be affected.

I think that the issue is related to:

// Add rectangle for pan handlers
containerParent.append("rect")
    .attr("width", SVGWidth)
    .attr("height", SVGHeight)
    .style("fill", "none")
    .style("pointer-events", "all");

JSFIDDLE

Answer 1

By moving the code snippet from your post before appending g element containing starter elements, the issue is fixed:

...
// Add rectangle for pan handlers
containerParent.append("rect")
    .attr("width", SVGWidth)
    .attr("height", SVGHeight)
    .style("fill", "none")
    .style("pointer-events", "all");


// Add starter elements and their container
var starterElmsParent = containerParent.append("g");
...

Fiddle: http://jsfiddle.net/praveenscience/88gL4aks/