TagCanvas drag control

« Return to TagCanvas page

The normal animation method for TagCanvas is to rotate in the direction of the mouse cursor when it is within the canvas. The dragControl option changes the behaviour to move when the cloud is dragged.

Example canvas

Draggable cloud

Using drag control

To enable drag controls, set the dragControl option to true. The dragThreshold option can be adjusted to determine how many pixels the cursor must move before a click is judged to be a drag - by default it is set to 4 pixels.

Some of the other options work slightly differently when drag controls are enabled:

The noMouse and lock = "xy" options both work normally, leaving the cloud immobile, and noSelect allows dragging but without the ability to click on a tag.

Touch interface

Enabling the dragControl option also enables some touch-screen controls. This means you should be able to drag the cloud with your finger and tap a tag to activate it.

The pinchZoom option added in version 2.7 of TagCanvas is independent of the dragControl option, so you can use whatever combination serves your purpose.

Touch controls should work on the iPad, iPhone and Android devices. I have no idea if they work on Windows phones or tablets.

« Back to top of page Cloud shapes »