Untitled

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="app" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="app" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="app" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>External Drag Drop</title>


    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/overlays.css">

</head>
<body ng-controller="appController as vmApp">

<div class="dropzone">
    <div id="draggable" draggable="true" ondraxgstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable
    </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

<style>
    #draggable {
        width: 200px;
        height: 20px;
        text-align: center;
        background: white;
    }

    .dropzone {
        width: 200px;
        height: 20px;
        background: blueviolet;
        margin-bottom: 10px;
        padding: 10px;
    }
</style>

<script>
    var dragged;

    /* events fired on the draggable target */
    document.addEventListener("drag", function( event ) {
        console.log('drag');
    }, false);

    document.addEventListener("dragstart", function( event ) {
        console.log('dragstart');
        // store a ref. on the dragged elem
        dragged = event.target;
        // make it half transparent
        event.target.style.opacity = .5;
    }, false);

    document.addEventListener("dragend", function( event ) {
        console.log('dragend');
        // reset the transparency
        event.target.style.opacity = "";
    }, false);

    /* events fired on the drop targets */
    document.addEventListener("dragover", function( event ) {
        //console.log('dragover');
        // prevent default to allow drop
        event.preventDefault();
    }, false);

    document.addEventListener("dragenter", function( event ) {
        console.log('dragenter');
        // highlight potential drop target when the draggable element enters it
        if ( event.target.className == "dropzone" ) {
            event.target.style.background = "purple";
        }

    }, false);

    document.addEventListener("dragleave", function( event ) {
        console.log('dragleave');
        // reset background of potential drop target when the draggable element leaves it
        if ( event.target.className == "dropzone" ) {
            event.target.style.background = "";
        }

    }, false);


    function stringToDOM(xmlString){
        try{
            var div = document.createElement('div');
            div.innerHTML = xmlString;
            return div.childNodes[0];
        }
        catch(e){
            console.warn('stringToDOM > error',e);
            return null;
        }
        return null;
    }


    function readAsDataUrlES6(single_local_file)
    {
        return new Promise(function(f,r){
            if(!single_local_file) {
                f(null);
                return;
            }
            var reader = new FileReader();
            var _successFn = function(e) { f(e.target.result); };
            var _failureFn = function(e) { console.error(e); f(null); };
            reader.onload = _successFn;
            reader.onabort = _failureFn;
            reader.onerror = _failureFn;
            reader.readAsDataURL(single_local_file);
        });
    }


    function readFilesAsDataURL(files,dataUrls,_counter)
    {
        if(!files) files=[];
        if(!dataUrls) dataUrls=[];
        if(_counter==null || _counter==undefined) _counter=files.length-1;

        return readAsDataUrlES6(files[_counter]).then(function(dataUrl){
            if(!dataUrl) return dataUrls;

            dataUrls.push(dataUrl);

            return readFilesAsDataURL(files,dataUrls,_counter-1);
        });
    }


    function DroppedFileClass(){
        this.name = null;
        this.bytes = null;
        this.timestamp = null;
        this.mime_type = null;
        this.src = null;
        this.source = null;

        this.isLocalSource   = function(){ return this.source === 'Local'; };
        this.isRemoteSource  = function(){ return this.source === 'Remote'; };
        this.setLocalSource  = function(){ this.source = 'Local'; };
        this.setRemoteSource = function(){ this.source = 'Remote'; };

        this.setSrc = function(src){
            this.src = src;
            if(!src) return;

            // Remote
            if(src.indexOf('http')>=0){
                var j = src.lastIndexOf('/');
                if(j>=0){ this.name = src.substr(j+1); }
                j = src.lastIndexOf('.');
                if(j>=0){ this.mime_type = src.substr(j+1); }
            }
        }
    }


    function prepareDroppedFiles(e,files){
        var _files = files;
        if(!_files) _files=[];

        var target_files = (e.target.files || e.dataTransfer.files || e.originalEvent.dataTransfer.files);

        var target_getdata = function(mime_type){
            if(e.target.getData) return e.target.getData(mime_type);
            if(e.dataTransfer.getData) return e.dataTransfer.getData(mime_type);
            if(e.originalEvent.dataTransfer.getData) return e.originalEvent.dataTransfer.getData(mime_type);
            return null;
        };

        var _newfile=null;

        if(target_files.length>0){
            for(var i=0; i<target_files.length; i++){
                _newfile = new DroppedFileClass();
                _newfile.setLocalSource();
                _newfile.name = target_files[i].name;
                _newfile.bytes = target_files[i].size;
                _newfile.timestamp = target_files[i].lastModified;
                _newfile.mime_type = target_files[i].type;
                _files.push(_newfile);
            }
        }

        if(target_getdata){
            var _element = target_getdata('text/html');
            if(_element && _element.length>0){
                var _dom_element = stringToDOM(_element);
                if(_dom_element){
                    _newfile = new DroppedFileClass();
                    _newfile.setRemoteSource();
                    _newfile.setSrc(_dom_element.getAttribute('src'));
                    _files.push(_newfile);
                }
            }
        }
        return _files;
    }


    function getDroppedFiles(e){
        var dropped_files = prepareDroppedFiles(e);

        return readFilesAsDataURL(dropped_files.local_files).then(function(array){
            if(!array || array.length<=0) return dropped_files;

            for(var i=0; i<array.length; i++){
                dropped_files.local_files[i].setSrc(array[i]);
            }

            return dropped_files;
        });
    }


    document.addEventListener("drop", function( e ) {
        // prevent default action (open as link for some elements)
        console.log(e);
        e.preventDefault();

        getDroppedFiles(e).then(function(dropped_files){
            console.log('Dropped Files',dropped_files);
        });


        // move dragged elem to the selected drop target
        /*if ( e.target.className == "dropzone" ) {
            e.target.style.background = "";
            dragged.parentNode.removeChild( dragged );
            e.target.appendChild( dragged );
        }*/

    }, false);
</script>

</body>
</html>