Déjame darte un ejemplo para entender fácilmente. El siguiente ejemplo permite al usuario arrastrar y soltar elementos (elementos) de una lista a otra o la misma lista.
// html
- Cómo construir un sitio web increíblemente rápido que solo muestre imágenes y texto
- ¿Cómo son las últimas semanas para un estudiante en una escuela de desarrolladores?
- ¿Cuáles son las implicaciones de seguridad de usar una herramienta de sincronización de marcadores como Xmarks?
- Cómo crear blogs y páginas web sin publicarlas oficialmente en Internet, pero generando una página web completamente visible
- ¿Cómo debo prepararme para una entrevista de desarrollador de pila completa?
- <li ui-draggable = "true" drag = "item"
on-drop-success = “dropSuccessHandler ($ evento, $ índice, hombres)”
ng-repeat = “elemento en hombres”>
{{ít}}
- <li ui-draggable = "true" drag = "item"
on-drop-success = “dropSuccessHandler ($ evento, $ índice, mujeres)”
ng-repeat = “elemento en la pista de mujeres por $ index”>
{{ít}}
Ver en html arriba hay dos listas. Ambos contienen las directivas ‘ ui-draggable ‘, ‘ on-drop-success ‘ y ‘ ui-on-Drop ‘ que se definen en el módulo ngDragDrop . Ahora déjame mostrarte la etiqueta del script para aclarar toda la complejidad.
aplicación var = angular.module (‘plunker’, [‘ngDragDrop’]);
app.controller (‘MainCtrl’, function ($ scope) {
$ scope.men = [
‘John’,
‘Jack’,
‘Marca’,
‘Ernie’
];
$ scope.women = [
‘Jane’,
‘Jill’,
‘Betty’,
‘María’
];
$ scope.addText = “”;
$ scope.dropSuccessHandler = function ($ event, index, array) {
array.splice (índice, 1);
};
$ scope.onDrop = function ($ event, $ data, array) {
array.push ($ datos);
};
});
aquí ‘ ui-on-Drop ‘ es responsable de agregar el elemento soltado para empujar dentro de la matriz donde lo está soltando.
on-drop-success es responsable de eliminar el elemento arrastrado de la matriz desde la que fue arrastrado.
Y para responder la pregunta, ui-draggable = “true” drag = “item” habilitó el arrastre de las listas (
). Esto puede hacer que el elemento ant html arrastre esté habilitado.
Referencia: Arrastrar y soltar angular (incluye este draganddrop.js)