A drag and drop binding for Knockout.
npm install knockout-dragdrop
bower install knockout-dragdrop
Dragging between two lists:
<h2>Drag from here</h2> <ul data-bind="foreach: source"> <li data-bind="text: $data, dragZone: { name: 'lists' }"></li> </ul> <h2>Drop here</h2> <ul data-bind="foreach: target, dropZone: { accepts: 'lists', drop: drop }"> <li data-bind="text: $data"></li> </ul>
var model = { source: ko.observableArray([ 'Declan', 'Tessa', 'Claire', 'Violet', 'Alice', 'Mia', 'Camille', 'Aiden' ]), target: ko.observableArray(), drop: function (data, model) { model.source.remove(data); model.target.push(data); } }; ko.applyBindings(model);
Run the following command:
npm install && bower install && serve
and open http://localhost:3000 in your browser.
Knockout.dragdrop is licensed under a standard 3-clause BSD license -- see the LICENSE-file for details.