Skip to main content

Interactivity

Canvas clicks​

By default, clicking on the video pauses it, just like a normal video. Of course, you do not want this behavior for interactive components. Liqvid tries to be intelligent and will not pause in response to clicks on <a>, <area>, <button>, <input>, <option>, <select>, <textarea>, or <video> tags. On other tags this behavior needs to be explicitly disabled.

To prevent pausing, add data-affords="click" to components that should receive clicks. You can also disable this behavior globally by subscribing to the canvasClick event and returning false.

  • Refresh

Dragging​

Even in ordinary Javascript, drag functionality is nontrivial. We provide the dragHelperReact utility to make it a bit easier. Here is code for a draggable pig:

  • Refresh

Note the use of the draggable and dragging classes to provide feedback to the user.