Dragging behavior

Dragging involves grabbing an object with a mousedown or touchstart event, moving the cursor (mousemove or touchmove) and dropping the object somewhere (mouseup, touchend, or touchcancel). These native events are grouped in three drag events: start, drag, and end, that are handled by a drag behavior object.

A drag behavior is created with the d3.drag() function, as follows:

const drag = d3.drag();

You can then apply the drag behavior to a selection, for example:

drag(d3.selectAll(".square"));

Normally, the call() method is used to achieve the same result in a selection chain,as follows:

d3.selectAll(".square").call(drag);

Now you can capture drag events when you try to click and drag any of the selected objects. But first you need to configure at least one event handler.

...