D3.js: Remove force.drag from a selection

Question

I have a (rather simple) question: How to \"un-call\" force.drag on a selection made by D3.js? Let\'s say I created a set of elements and called \"call\" on it, giving it th

Answer 1

You are close. The drag event is initiated by a mousedown event with a namespace called drag. See: https://github.com/mbostock/d3/blob/master/src/behavior/drag.js#L5

So, to remove this you could do:

d3.select('rect#no-drag').on('mousedown.drag', null);

Answer 2

This line somehow it's not mobile compatible (chrome/android)

d3.select('rect#no-drag').on('mousedown.drag', null);

Answer 3

This question isn't asking how to have fine grained control on the drag element, but I came here looking for how to toggle the drag on/off based on conditions, and the asker also asked how to get the drag back after removing it in the comments.

Thus, for anyone looking for how to conditionally allow the drag event, use drag.filter.

drag.filter takes a callback that needs to return a boolean. If the callback returns true, the drag happens, otherwise the drag doesn't trigger.

This is much cleaner than removing the drag from the selection and then trying to re-apply it.