Drag

Dragndrop module and implementation of keys navigation

API

init()

Initialize Drag

drag.init();

set(options)

Set options to specimen of Drag. This method reload controller automatically. It means Drag-module will refreshed all properties.

drag.set({
    $elem: '.box',
    $borderElem: '.wrap',
    dragEndTimeout: 100
});

bind(selectors)

Method binds DOM nodes with Drag mechanics

selectors

Type string

drag.bind('.box, .boxa');

unbind(selectors)

Method unbind DOM nodes

selectors

Type string

drag.unbind('.box, .boxa');

OPTIONS

$elem

Initial selector which will be bound with Drag mechanics

Type string

let drag = new Draggable({
        $elem: '.box, .boxa'
    }).init();

$borderElem

Set borders where will be draggable actions

Type string Default false

drag.set({$borderElem: '.border'});

dragEndTimeout

Set timer for dragEnd condition

Type number

drag.set({dragEndTimeout: 2000});

clsDragElem

Set main class for Draggable DOM nodes

Type string Default adw-drag

drag.set({clsDragElem: 'myClass'});

clsDragStart

Set class for drag-start event

Type string Default adw-drag_start

drag.set({clsDragStart: 'myClass'});

clsDragMove

Set class for drag-move event

Type string Default adw-drag_move

drag.set({clsDragMove: 'myClass'});

clsDragEnd

Set class for drag-end event

Type string Default adw-drag_end

drag.set({clsDragEnd: 'myClass'});

clsDragDest

Set class for drag-on-destination event

Type string Default adw-drag_on-dest

drag.set({clsDragDest: 'myClass'});

destination.target

Set destination target

Type string Default false

drag.set({
    destination: {
        target: '.destination'
    }
});

destination.strict

Set strict mode for destination

Type boolean Default false

drag.set({
    destination: {
        strict: true
    }
});

backAgain

When dragEnd event occurs current draggable node will reset on initial position

Type boolean Default false

drag.set({backAgain: true});

clone

Set clone node option

Type boolean Default false

drag.set({clone: true});

cloneKey

Set key or key combination for cloning DOM nodes. NOTE: enable "clone" option is not required.

Type array Default false

drag.set({cloneKey: [17, 18]});

cloneKey

Set key or key combination for cloning DOM nodes. NOTE: enable "clone" option is not required.

Type array Default false

drag.set({cloneKey: [17, 18]});

clearGarbage

Clear garbage node after drag-end event

Type boolean Default false

drag.set({clearGarbage: true});

clearGarbage

Clear garbage node after drag-end event

Type boolean Default false

drag.set({clearGarbage: true});

imposition

Set barriers for your draggable elements

Type string Default false

drag.set({imposition: '.wall, .another-brick-in-the-wall'});

navigation

Set this option and drags your element by keyboard

Type object Default false

drag.set({navigation: {
      up: [38],
      right: [39],
      down: [40],
      left: [37],
      step: 10
}});

callOnTarget(target, elem, callOnTarget, lastPoint)

Callback which occurs when dragEnd event was on destination target

Type function Default false

drag.set({callOnTarget: function(target, elem, callOnTarget, lastPoint){
    console.log(target);
    console.log(elem);
    console.log(callOnTarget);
    console.log(lastPoint);
}});

callDragEnd(elem, callOnTarget, lastPoint)

Callback which occurs when dragEnd event was occur

Type function Default false

drag.set({callDragEnd: function(elem, callOnTarget, lastPoint){
    console.log(elem);
    console.log(callOnTarget);
    console.log(lastPoint);
}});

License

MIT ©