0

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.

1 respuesta 1

1

Luego de tanto tiempo, he resuelto de otra manera, junto a un colega, el problema.

Hay dos tipos de eventos en un drag and drop. Por un lado, los eventos que apuntan al elemento que se está arrastrando, y por el otro, los eventos que se desencadenan en los elementos objetivos desde donde se arrastran o hacia donde son arrojados los elementos arrastrables.

ondragend o dragend no funciona en este script, debido a que es un evento que se desencadena, provoca o dispara en el elemento arrastrable.

Lo que yo estoy haciendo o buscando hacer, es disparar los eventos en el elemento en donde se arrojan el elemento arrastrable.

Por otro lado, nos apoyamos un poco en jQuery para resolver el problema.

var mainArea = document.getElementById('dndMain');
var xlfInput = document.getElementById('xlf');
var drop_area = document.getElementById('input_mensaje');
var body = document.getElementById('body');
        
(function () {

   //se pasa por arriba del body  
   body.ondragover = function (e) {
       e.preventDefault();
       return false;
   }

   //se suelta algo arriba del body sin sentido.
   body.ondrop = function (e) {
        e.preventDefault();
        return false;
   }
                   
   // pasa por la zona
   drop_area.ondragover = function (e) {
        e.preventDefault();
        mainArea.className = 'msger-chat blur-area';
        $("#input_mensaje").addClass("dropArea");
        $("#input_mensaje").attr("placeholder", "Arrastre y suelte un archivo aquí.");
        return false;
   }

   // si sale de la zona marcada
   drop_area.ondragleave = function (e) {
        e.preventDefault();
        mainArea.className = 'msger-chat';
        $("#input_mensaje").removeClass("dropArea");
        $("#input_mensaje").attr("placeholder", "Enter para enviar...");
   }

   // se suelta el archivo
   drop_area.ondrop = function (e) {
        e.preventDefault();
        mainArea.className = 'msger-chat';
        $("#input_mensaje").removeClass("dropArea");
        $("#input_mensaje").attr("placeholder", "Enter para enviar...");
        xlfInput.files = e.dataTransfer.files;

        const dT = new DataTransfer();
        dT.items.add(e.dataTransfer.files[0]);

        xlfInput.files = dT.files;
                        
        return dndAdjuntar();
   }

 })();

Lo que hicimos fue optimizar el ondragleave que es un evento que se desencadena en el objetivo y no en el elemento arrastrable, y es lo más parecido a un dragend.

Así pudimos mejorar el código y hacer que todo funcione.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.