The use directive

Actions are essentially element-level lifecycle functions. They’re useful for things like:

  • interfacing with third-party libraries
  • lazy-loaded images
  • tooltips
  • adding custom event handlers

In this app, we want to make the orange box ‘pannable’. It has event handlers for the panstart, panmove and panend events, but these aren’t native DOM events. We have to dispatch them ourselves. First, import the pannable function…

  1. import { pannable } from './pannable.js';

…then use it with the element:

  1. <div class="box"
  2.     use:pannable
  3.     on:panstart={handlePanStart}
  4.     on:panmove={handlePanMove}
  5.     on:panend={handlePanEnd}
  6.     style="transform: translate({$coords.x}px,{$coords.y}px)"
  7. ></div>

Open the pannable.js file. Like transition functions, an action function receives a node and some optional parameters, and returns an action object. That object can have a destroy function, which is called when the element is unmounted.

We want to fire panstart event when the user mouses down on the element, panmove events (with dx and dy properties showing how far the mouse moved) when they drag it, and panend events when they mouse up. One possible implementation looks like this:

  1. export function pannable(node) {
  2.     let x;
  3.     let y;
  5.     function handleMousedown(event) {
  6.         x = event.clientX;
  7.         y = event.clientY;
  9.         node.dispatchEvent(new CustomEvent('panstart', {
  10.             detail: { x, y }
  11.         }));
  13.         window.addEventListener('mousemove', handleMousemove);
  14.         window.addEventListener('mouseup', handleMouseup);
  15.     }
  17.     function handleMousemove(event) {
  18.         const dx = event.clientX - x;
  19.         const dy = event.clientY - y;
  20.         x = event.clientX;
  21.         y = event.clientY;
  23.         node.dispatchEvent(new CustomEvent('panmove', {
  24.             detail: { x, y, dx, dy }
  25.         }));
  26.     }
  28.     function handleMouseup(event) {
  29.         x = event.clientX;
  30.         y = event.clientY;
  32.         node.dispatchEvent(new CustomEvent('panend', {
  33.             detail: { x, y }
  34.         }));
  36.         window.removeEventListener('mousemove', handleMousemove);
  37.         window.removeEventListener('mouseup', handleMouseup);
  38.     }
  40.     node.addEventListener('mousedown', handleMousedown);
  42.     return {
  43.         destroy() {
  44.             node.removeEventListener('mousedown', handleMousedown);
  45.         }
  46.     };
  47. }

Update the pannable function and try moving the box around.

This implementation is for demonstration purposes — a more complete one would also consider touch events.