Con función táctil arrastrable & biblioteca Sortable-draggable. js

Vista prévia

Descripción

draggable. js es una librería JavaScript personalizable/droppable/Sortable/intercambiable que funciona con los eventos de arrastrar, tocar y forzar toque del ratón.

Funcionamiento

Instálelo a través de gestores de paquetes:

# Yarn
$ yarn add @shopify/draggable

# NPM
$ npm install @shopify/draggable --save

API draggable, opciones y eventos.

// containers: specify the containers that hold draggable items
// options: an array of options as shown below
new Draggable(containers, options)

// eventName: event name as shown below
// listener: callback for events
draggable.on(eventName, listener)

// eventName: event name as shown below
// listener: callback for events
draggable.off(eventName, listener)

// eventName: event name as shown below
draggable.trigger(eventName, event)

// destroy
draggable.destroy()

// options
draggable: '.draggable-source',
handle: null, // css selector for a handle element
delay: 0,
placedTimeout: 800,
native: false,
plugins: [Mirror, Accessibility],
classes: {

'container:dragging': 'draggable-container--is-dragging',

'source:dragging': 'draggable-source--is-dragging',

'source:placed': 'draggable-source--placed',

'container:placed': 'draggable-container--placed',

'body:dragging': 'draggable--is-dragging',

'draggable:over': 'draggable--over',

'container:over': 'draggable-container--over',

mirror: 'draggable-mirror',
},

// events

draggable.on('drag:start', function(){

// ...
})

draggable.on('drag:move', function(){

// ...
})

draggable.on('drag:over', function(){

// ...
})

draggable.on('drag:over:container', function(){

// ...
})

draggable.on('drag:out', function(){

// ...
})

draggable.on('drag:out:container', function(){

// ...
})

draggable.on('drag:stop', function(){

// ...
})

draggable.on('drag:pressure', function(){

// ...
})

draggable.on('mirror:created', function(){

// ...
})

draggable.on('mirror:attached', function(){

// ...
})

draggable.on('mirror:move', function(){

// ...
})

API, opciones y eventos sortables.

// containers: specify the containers that hold Sortable items
// options: an array of options as shown below
new Sortable(containers, options)

// eventName: event name as shown below
// listener: callback for events
Sortable.on(eventName, listener)

// eventName: event name as shown below
// listener: callback for events
Sortable.off(eventName, listener)

// eventName: event name as shown below
Sortable.trigger(eventName, event)

// destroy
Sortable.destroy()

// events
Sortable.on('sortable:start', function(){
 // ...
})

Sortable.on('sortable:sorted', function(){
 // ...
})

Sortable.on('sortable:stop', function(){
 // ...
})

API swappable, opciones y eventos.

// containers: specify the containers that hold Swappable items
// options: an array of options as shown below
new Swappable(containers, options)

// eventName: event name as shown below
// listener: callback for events
Swappable.on(eventName, listener)

// eventName: event name as shown below
// listener: callback for events
Swappable.off(eventName, listener)

// eventName: event name as shown below
Swappable.trigger(eventName, event)

// destroy
Swappable.destroy()

API droppable, opciones y eventos.

// containers: specify the containers that hold Droppable items
// options: an array of options as shown below
new Droppable(containers, options)

// eventName: event name as shown below
// listener: callback for events
Droppable.on(eventName, listener)

// eventName: event name as shown below
// listener: callback for events
Droppable.off(eventName, listener)

// eventName: event name as shown below
Droppable.trigger(eventName, event)

// destroy
Droppable.destroy()

// events
Droppable.on('droppable:over', function(){

// ...
})

Droppable.on('droppable:out', function(){

// ...
})

Registro de cambios

v1.0.0-beta8 (09/08/2018)

• Plugin de anuncio para usar textContent en lugar de innerHTML

v1.0.0-beta7 (06/10/2018)

• Se agregó el plugin ResizeMirror
• Corregido eventos de arrastre nativos con arrastrable
• Solucionado bug de posición del ratón en desplazable
• Corrija el evento de movimiento de arrastre inicial