Skip to content

Files

Latest commit

Sep 22, 2023
b3e34bc · Sep 22, 2023

History

History

DragSensor

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Sep 22, 2023
Sep 22, 2023
Dec 29, 2020
Oct 6, 2017

Drag Sensor

Draggable does not use this sensor by default

Picks up browser drag events and triggers the events below on a source container.

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

API

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

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

dragSensor.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 touch start

Known issues

The drag sensor uses the native Drag and Drop API and therefor Draggable does not create a mirror. This means there is less control over the mirror.

Example

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

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

// Remove default mouse sensor
draggable.removeSensor(Sensors.MouseSensor);

Caveats

  • The distance option will not work with this sensor.