lrDragNDrop : copiez, déplacez et ordonnez vos éléments avec ce plugin AngularJSqui implémente un drag and drop sur des collections.
lrDragNDrop est un plugin AngularJS qui permet de gérer des collections d'éléments à l'aide de la technique du drag and drop. Vous pourrez réaliser trois actions :
- Déplacer un élément d'une collection à une autre. Ce qui représente un couper / coller.
- Copier un élément d'une collection dans une autre collection. L'élément reste dans la collection source et est créé dans la collection cible.
- Ordonner les éléments d'une même collection. Cela correspond à un déplacement de l'élément.
Vous pouvez l'utiliser comme une directive et le charger avec l'instruction :
| Code javascript : | Sélectionner tout |
angular.module('monApplication',['lrDragNdrop'])
Selon l'action voulue, il faut positionner la directive adéquate : lr-drag-src pour le copier / coller, lr-drag-src-safe pour la copie uniquement ou lr-drop-target pour l'ordonnancement. Par exemple :
| Code html : | Sélectionner tout |
1 2 3 | <ul> <li ng-repeat="item in targetCollection" lr-drop-target="anyNamespace">{{item}}</li> </ul> |
Le plugin ne fonctionne actuellement pas avec des collections vides parce que la directive est précisée sur l'élément de la liste (<li>) et non pas sur la liste elle-même <ul>.
Il y a également la possibilité d'utiliser des adorners.
Démonstrations. Les sources sur GitHub. D'après un article sur DailyJS parlant également de Lukis, un éditeur d'image expérimental, et de Backbone.Controller (MVC).