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 https://localhost:3000 in your browser.
Knockout.dragdrop is licensed under a standard 3-clause BSD license -- see the LICENSE
-file for details.