Firefox drag and drop resolved issue

by Rayudu Ikkurthi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="drop_zone" data-bind="event:{
                dragover:   $root.dragover,
                drop:       $root.drop,
                dragenter:  $root.dragenter,
                dragleave:  $root.dragleave
            }, css:{over:isOver}, style:style, text:text"></div>
    <ul data-bind="foreach: elements" style="height: 100px">
        <li data-bind="text: $data"></li>
    </ul>
</div>

CSS

.drop_zone {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding:40px 25px;
    text-align: center;
    font: 20pt bold'Vollkorn';
    color: #bbb;
    height:300px;
    border:1px solid red;
    background-color:#fff;
}
.drop_zone.over {
    border: 1px dashed red;
    background-color: #0f0;
}

JavaScript

function dropZone() {
    var self = {
        'elements': ko.observableArray([]),
            'style': ko.observable(),
            'text': ko.observable('Drop files here'),
            'enteredCount': ko.observable(0)
        // just to see that the output is correct
    };
    self.isOver = ko.computed(function () {
        return self.enteredCount() > 0;
    });
    return self;
}

function ViewModel() {
    var self = this;
    this.dropZones = ko.observableArray([dropZone()]);

    this.dragover = function (e) {
        console.log('dragOver');
    };

    this.drop = function (data, e) {
        console.log('drop');
        if ('dataTransfer' in e) {
            var files = e.dataTransfer.files,
                i, f;
            for (i = 0; f = files[i]; ++i) {
                data.elements.push(f.name);
            }
        } else {
            console.warn("No dataTransfer in", e);
        }
        data.text('Drop files here');
        data.enteredCount(0);
    };

    this.dragenter = function (data, e) {
        data.enteredCount(data.enteredCount() + 1);
        data.text('Over on this text some thing happened');
    };

    this.dragleave = function (data, e) {
        data.enteredCount(data.enteredCount() - 1);
        //data.text('Drop files here');
    };
}

ko.applyBindings(new ViewModel());