d3 drag when elements are on top of each other

Question

When multiple elements that share coordinates have drag beauvoir assigned to them, the "dragstart" event is invoked for all elments under the mouse but the "drag" and "dragend" are only invoked for one of them.

check out the console output on this: http://jsfiddle.net/AsherBarak/np7g10be/

Is this by design? What if I need to have different drag behvioure for different elements that happened to be stacked?

var dragGroup = d3.behavior.drag()
    .on('dragstart', function () {
    console.log('Start Dragging Group');
})
    .on('drag', function (d, i) {
    console.log('Dragging Group');
})
    .on('dragend', function (d, i) {
    console.log('Ended Dragging Group');
});

var dragCircle = d3.behavior.drag()
    .on('dragstart', function () {
    console.log('Start Dragging Circle');
})
    .on('drag', function (d, i) {
    console.log('Dragging Circle');
})
    .on('dragend', function (d, i) {
    console.log('Ended Dragging circle');
});

var svg = d3.select('body').append('svg').attr('viewBox', '-50 -50 300 300');
var g = svg.selectAll('g').data([{
    x: 10,
    y: 10
}])
    .enter().append('g').call(dragGroup);

g.append('rect').attr('width', 100).attr('height', 100);

g.selectAll('circle').data([{
    cx: 90,
    cy: 80
}]).enter()
    .append('circle')
    .attr('cx', function (d) {
    return d.cx
})
    .attr('cy', function (d) {
    return d.cy
})
    .attr('r', 30)
.call(dragCircle);

Answer 1

Stopping sourceEvent propagation on dragstart event of circle will fix this issue.

stopPropagation method prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

var dragCircle = d3.behavior.drag()
    .on('dragstart', function() {
        d3.event.sourceEvent.stopPropagation();
        console.log('Start Dragging Circle');
    })
    .on('drag', function(d, i) {
        console.log('Dragging Circle');
    });

 var dragGroup = d3.behavior.drag() .on('dragstart', function() { console.log('Start Dragging Group'); }) .on('drag', function(d, i) { console.log('Dragging Group'); }); var dragCircle = d3.behavior.drag() .on('dragstart', function() { d3.event.sourceEvent.stopPropagation(); console.log('Start Dragging Circle'); }) .on('drag', function(d, i) { console.log('Dragging Circle'); }); var svg = d3.select('body').append('svg').attr('viewBox', '-50 -50 300 300'); var g = svg.selectAll('g').data([{x:10,y:10}]) .enter().append('g').call(dragGroup); g.append('rect').attr('width', 100).attr('height', 100); g.selectAll('circle').data([{cx: 90,cy:80}]).enter() .append('circle') .attr('cx', function(d){ return d.cx }) .attr('cy', function(d){ return d.cy }) .attr('r', 30) .call(dragCircle); 

 circle{ fill: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>