Skip to content

Latest commit

 

History

History
 
 

DragSensor

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

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.