Drag

The drag component allows to create a draggable zone you can control with your mouse.

@import 'compotes/css/drag';

import { Drag } from 'compotes'

const drag = new Drag('.c-drag')

You need to have elements overflowing inside the component because it uses the css property overflow: auto;.

<div class="c-drag">
  <!-- Your overflowing content -->
</div>

Options

You can change some options from the component.

import { Drag } from 'compotes'

const drag = new Drag('.c-drag', {
  init: true, 
  initEvents: true
})

• init (boolean): Init the component on creation
• initEvents (boolean): Init events on the component

Methods

The drag component provides several methods to init and destroy it.

import { Drag } from 'compotes'

const drag = new Drag('.c-drag', {
  init: false
})
drag.init()

• init(): Init the component
• initEvents(): Init component events
• destroyEvents(): Destroy the component events
• destroy(): Destroy the component

Data

You can access data from the component like this:

import { Drag } from 'compotes'

const drag = new Drag('.c-drag')
console.log(drag.isDraggable)

• options (options object): Get options used to init the component
• isDraggable (boolean): Tell if the component is draggable or not
• isDragging (boolean): Tell if the component is currently dragging or not

Events

You can listen to emitted events directly on the drag element like this:

dragEl.addEventListener('c.drag.init', (e) => { 
  console.log(e.detail)// drag object
})

• c.drag.init: On component init
• c.drag.start: On component drag start
• c.drag.end: On component drag end
• c.drag.destroy: On component destroy