Dragging API in D3.js

D3.js provides us a feature called drag and drop. It is a great and powerful feature to use. You can select the draggable elements with the help of a mouse and drag to an element that is droppable; after it, you can drop them at the required position by releasing the mouse button.

In this lesson, we will explain about the Dragging APIs in a detailed form.

Configuration of Dragging API

You can configure the dragging API with the help of below given script.

Methods of Dragging API

Here, some methods of dragging APIs are listed below.

d3.drag()
drag.container([container])
drag(selection)
drag.subject([subject])
drag.filter([filter])
drag.on(typenames, [listener])
drag.clickDistance([distance])
d3.dragEnable(window[, noclick])
d3.dragDisable(window)

Now, we have an explanation of each method in detail.

d3.drag()

This method can be applied to generate a new dragging. It is shown in the below code.

var drag = d3.drag();

</script>

drag.container([container])

The above-given method is used to fix the container to the function for dragging purposes. If you don’t define the container, then it provides you the existing accessor. You can also drag an element over to a canvas by defining the container again. It is shown in the below-mentioned code.

drag.container([container])

function container()

{

return this;

}

drag(selection)

It can be applied to drag the selected elements. This function can be called by the selection.call function. It is defined below.

d3.select(“.node”).call(d3.drag(). On(“drag”, mousemove));

drag.subject([subject])

This method can be applied to fix the subject for the declared function for dragging purpose. It is explained in below given script.

function subject (d)

{

return d = = null ? {x: d3.event.x, y: d3.event.y} : d;

}

In the above code, the subject denotes the elements being dragged out.

drag.filter([filter])

This method allows you to set the filter for the function for dragging, as explained in the below script.

function filter ()

{

return !d3.event.button;

}

drag.on(typenames, [listener])

It can be applied to fix the event listener over to a typename for dragging purposes. The typename should be considered as a string that holds the multiple typenames separated with the help of the whitespaces. A typename is also followed over to a period (.) and a name such as drag.two.

This method may also contain the following-

Start: It represents the starting of a new pointer.

Drag: It will help you to drag a pointer.

End: This will help you to deactivate an active pointer.

drag.clickDistance([distance])

This method can be applied to fix the highest distance for mouseup and mousedown events. If you don’t define the distance, then it will point out to the zero value.

d3.dragEnable(window[, noclick])

It will help you to perform drag and drop operations on the window. It will enable to invoke the mouseup event. If you allot null value, then the onclick event discards a zero-millisecond timeout.

d3.dragDisable(window)

It will help you to disable the drag and drop operation. It is also a by default action performed by some browsers. If you do not define the action, then it will set the CSS property to empty.

Drag Events in Dragging API

The D3.event method is used to fix the drag event. It is made up of the below-given properties.

Target: It will show you the nature of the drag.

Subject: This property can be determined by the drag.subject() method.

Type: It can be treated as a string, and it may be ‘drag’, ‘start’, ‘end’.

event.on(typenames, [listener])

This method will help you to perform dragging by exposing the event.on method as, explained in the below script.

d3.event.on(“drag”, dragged) .on(“end”, ended);