dragThreshold

Specifies the distance in pixels needed to trigger a drag.
The threshold can be specified differently for mouse our touch devices by using an object.

dragThreshold: 3,

// Or

dragThreshold: { mouse: 3, touch: 7 },

Accepts

Number
{ mouse: Number, touch: Number }
A Function that returns a Number or { mouse: Number, touch: Number }

When defined using a Function, the value will be automatically refreshed every time the container or target element is resized.
It can also be refreshed manually using the refresh() method.

Default

{ mouse: 3, touch: 7 }

dragThreshold code example

import { createDraggable } from 'animejs';

createDraggable('.square', {
  container: '.grid',
  dragThreshold: 20,
});

createDraggable('.circle', {
  container: '.grid',
  dragThreshold: { mouse: 10, touch: 15 },
});

<div class="large centered grid square-grid">
  <div class="square draggable"></div>
  <div class="circle draggable"></div>
</div>

Previous Next

dragSpeed
scrollThreshold