d3 click and drag event nesting

Question

I am nesting a lot of elements inside of a g element like so:

    
    
    ...

         


        

Answer 1

I have a similar sort of issue (http://jsfiddle.net/j8RZN/1/), except the suggested workaround does not seem to be helping.

userBox.data([userBox]).call(d3.behavior.drag() //makes the box to move
//titleBox.data([userBox]).call(d3.behavior.drag()  //does not make the box move
.on("dragstart", function() {})
.on("drag", function(d, i) {
console.log('box being dragged');
d.attr("transform", "translate(" + (d3.event.x) +  "," + (d3.event.y) + ")");
})
.on("dragend", function() {}));

circleDrag.call(d3.behavior.drag()
.on("dragstart", function() {})
.on("drag", function(d, i) {
 d3.event.sourceEvent.stopPropagation();
 console.log('small rectangle being dragged');
})
.on("dragend", function() {}));