knockout-dragula
Simple binding for Knockout.js to add drag and drop functionality to observableArrays
using dragula.
Install
Using bower:
bower install knockout-dragula --save
Usage
The dragula
binding replaces foreach
:
You can also link multiple containers together by giving them a group name using the group
option:
Additional options
afterDrop
Callback function that is called when an item is dropped into the container. It will not be called if it is dropped into another container of the group, that container needs to specify its own afterDrop
callback.
The callback gets passed 5 arguments:
item
: the object that has been moved.sourceIndex
: The original position of the item insourceItems
.sourceItems
: The array from which the item was dragged.targetIndex
: The new position of the item intargetItems
.targetItems
: The array into which the item was dropped.
Note: By default the binding-context is bound to the afterDrop
function. If you want to bind something else, say the parent, you could write like this:
afterDelete
Callback function that is called when an item is removed.
The callback gets passed 5 arguments:
item
: the object that has been moved.sourceIndex
: The original position of the item insourceItems
.sourceItems
: The array from which the item was removed.
Note: By default the binding-context is bound to the afterDelete
function. If you want to bind something else, say the parent, you could write like this: