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
- ¿Podré aprender Django después de MIT 6.00 en edx?
- ¿Qué libros debo leer primero para aprender rápidamente cómo crear sitios web interactivos?
- ¿Qué lenguajes de programación debo aprender para desarrollar sitios web y aplicaciones? ¿Y en qué orden? Gracias.
- Cómo usar Dreamweaver
- ¿Cómo puede un servidor web (http) saber si la solicitud proviene de un navegador o no?
- <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)
