JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="drop_zone" data-bind="event:{
                dragover:   function(data, e){ $root.dragover(e);},
                drop:       function(data, e){ $root.drop(e, $data);},
                dragenter:  function(data, e){ $root.dragenter(e);},
                dragleave:  function(data, e){ $root.dragleave(e);}
            }">Drop files here</div>
    <ul data-bind="foreach: elements" style="height: 100px">
        <li data-bind="text: $data"></li>
    </ul>
</div>

CSS

.drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold'Vollkorn';
    color: #bbb;
}

JavaScript

function ViewModel(){
    var self = this;
    this.dropZones = ko.observableArray([{
        'elements' : ko.observableArray(['1', '2'])  //just to see that the output is correct
    },{
        'elements' : ko.observableArray(['5']) //just to see that the output is correct
    }]);

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

    this.drop = function(e, parent){
        console.log('drop');
        e.stopPropagation();
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            //self.elements.push(f.name);
            parent.elements.push(f.name);

            console.log(self.elements);

        }
        $('.drop_zone').css('background-color', '#ffffff');
    }

    this.dragenter = function(e){
        console.log('dragEnter');
        $('.drop_zone').css('background-color', '#00ff00');
    }

    this.dragleave = function(e){
        console.log('end');
        $('.drop_zone').css('background-color', '#ffffff');
    }
}

ko.applyBindings(new ViewModel());