Estoy armando un pequeño sistema de drag n drop para un chat de angularjs.
La idea es tomar archivos externos y soltarlos en una zona para poder enviarlos por socket.
Lo que hice básicamente fue armar un controlador que pueda operar las acciones del drag n drop, pero lo que no funciona es el ondragend.
En este sentido, cuando selecciono un archivo externo y lo empiezo a arrastrar por la vista, y lo suelto en la zona asignada, todo funciona correctamente. Es decir, hay una zona de mensajes a la que le aplico un estilo en blur, y aparece un div que resalta la zona donde deben ser arrojados los archivos, que está por encima de textarea donde se escriben los mensajes. Cuando se suelta el archivo y se lo manda, las áreas vuelven a su estado original y todo se ve como antes. Esto funciona correctamente.
Sin embargo, cuando la acción se cancela sin soltar el archivo en el área asignada, es decir, cancelo el drag, por ejemplo, dándole a la tecla escape, todo queda igual, sin cambiar a sus estilos originales. La idea es que todo vuelva a su estilo original como en un principio.
CONTROLADOR:
(function(){
'use strict';
var dndModule = angular.module('app');
dndModule.controller('dndController', function($scope){
$scope.files = [];
});
dndModule.directive('fileDropzone', function(){
return {
restrict: 'A',
scope: {
filesToUpload: '='
},
link: function(scope, element, attributes){
var mainArea = document.getElementById('dndMain');
var dragArea = document.getElementById('dndArea');
var dropArea = document.getElementById('dndMessage');
(function () {
// DRAGOVER: cuando el archivo o elemento pasa por encima las zonas marcadas
dragArea.ondragover = function (e) {
e.preventDefault();
mainArea.className = 'msger-chat blur-area';
dragArea.className = 'msger-inputarea';
dropArea.style.display = 'inherit';
return false;
}
//DRAGLEAVE: cuando el archivo o elemento sale de las zonas marcadas
dragArea.ondragleave = function (e) {
e.preventDefault();
dragArea.className = 'msger-inputarea';
return false;
}
// DRAGEND: cuando se finaliza el drag
mainArea.ondragend = function (e) {
e.preventDefault();
mainArea.className = 'msger-chat';
dragArea.className = 'msger-inputarea';
console.log('dragend main Area');
return false;
}
dragArea.ondragend = function (e) {
e.preventDefault();
mainArea.className = 'msger-chat';
dragArea.className = 'msger-inputarea';
console.log('dragend drag Area');
return false;
}
dropArea.ondragend = function (e) {
e.preventDefault();
mainArea.className = 'msger-chat';
dragArea.className = 'msger-inputarea';
console.log('dragend drop Area');
return false;
}
//ONDROP: se suelta el archivo en el área
dropArea.ondrop = function (e) {
e.preventDefault();
mainArea.className = 'msger-chat';
dropArea.style.display = 'none';
console.log(e.dataTransfer.files);
return false;
}
})();
}
}
});
}).call(this);
CSS:
/* DRAG N DROP styles*/
#dndMessage {
background-color: #fff;
border: 5px dotted #002060;
text-align: center;
padding: 2%;
position: relative;
top: -57px;
display: none;
width: 100%;
margin-bottom: 5px;
margin-top: 5px;
}
.blur-area {
filter: blur(6px);
}
HTML:
<section ng-controller="dndController">
<main class="msger-chat" id="dndMain">
<!-- Aquí van los mensajes -->
</main>
<footer class="msger-inputarea" id="dndArea" file-dropzone files-to-upload="files">
<!-- Aquí va el textarea sobre el cual se intermpone el div donde se arrojan los archivos -->
<div id="dndMessage">
Suelte los archivos aquí
</div>
</footer>
</section>
En otras palabras, lo que hago en el controlador es cambiar los estilos según las diferentes acciones del drag n drop, y lo que no funciona es el dragend u ondragend, es decir, cuando finalizo la ejecución del darg n drop sin realizar la acción del drop, y que por alguna razón, no se desean enviar los archivos que se habían seleccionado o se habían arrastrado hasta el chat.
Gracias.