ForceTouchSensor

Force Touch Sensor

WORK IN PROGRESS

Draggable does not use this sensor by default

Picks up browser force touch events and triggers the events below on a source container. This sensor only works for Macbook Pros with force touch trackpads

• drag:start
• drag:move
• drag:stop
• drag:pressure

API

new ForceTouchSensor(containers: HTMLElement[]|NodeList|HTMLElement, options: Object): ForceTouchSensor
To create a force touch sensor, specify the containers it should pay attention to. Sensors will always trigger sensor events on container element.

forceTouchSensor.attach(): void
Attaches sensors to the DOM

forceTouchSensor.detach(): void
Detaches sensors to the DOM

Options

draggable {String}
A css selector for draggable elements within the containers specified.

delay {Number}
This value will delay force touch start

handle {String}
Specify a css selector for a handle element if you don't want to allow drag action on the entire element.

Example

import {Draggable, Sensors} from '@shopify/draggable';

const draggable = new Draggable(containers, {
  sensors: [Sensors.ForceTouchSensor],
});

Caveats

• When used in Safari with force touch track pad, make sure to add visual guidelines to the user to indicate that force needs to be used to start drag operation.