JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<p>
    Drag an image to copy it onto another image...
</p>

<div id="holder" data-bind="foreach: miscPhotos">
    <div class="pull-left well well-small"  draggable="true" data-bind="event:{
       dragstart: $root.handleDragStart,
       dragover:  $root.handleDragOver,
       drop:      $root.handleDrop
    }">
    
    <div class="thumb">
        <img class="thumb" data-bind="attr: {src: 'data:image/gif;base64,' + PhotoData()}" title="" style="display: block"/>
    </div>  
</div>

CSS

img {
    margin: 5px;
}

JavaScript

PhotoViewModel = function() {
  
    this.miscPhotos = ko.observableArray([

// photo 1
        {PhotoData: ko.observable(        "R0lGODdhZABkAOMAAMzMzJaWlrGxsaOjo8XFxZycnLe3t6qqqr6+vgAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAZABkAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu99w8CFwaBEGgSiBzpl7DAGBUnwbfh0GBoZIAgF4AwQSjQUFCBJ3AQUCkYF5AJeZF4pHewWAA5sCBacAc4kBlXgIlawBrrMUokd8hrudqp4BmqK/e5oVuUa9kXW8dQDKE4SEuJ1JfAMFy7QSxMHbE93G1EuYgHV7zAGQrXOV7ZC0thUGeAZKmI3rvedzoAAIBWpZ6icuGqd7zt6gi8MoYZyHECNKnEixosWLGDNq3Mixo8ePFiBDihxJsqTJkyhTqlzJsqXLlzC3RAAAOw==")},

// photo 2
        {PhotoData: ko.observable(
            "R0lGODdhZABkAOMAAMzMzJaWlrGxsaOjo8XFxZycnLe3t6qqqr6+vgAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAZABkAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu99w8CFwYBHmBQGUQOfMPQMBAgIBBlB9G38dBoYAiEaEgQMEEgEDBQUIEgSBeZUBoJudehcGgkh8BaYDnwIFrABzBnOagQiasYW0FggBBUp9isEBEq8AfHqKxazIFQQFAbhIw5V1wnWO1sQTiI8SgY1JfZfVucvHp8oAxs0TptjAqn182pSyu7SUubPRFOC3+o74smRvWJ07vkghgNYIoScKoCLCM+KtDb04hCbG2cixo8ePIyBDihxJsqTJkyhTqlzJsqXLlzBjypxJs6bNmzhz6tzJU0sEADs=")},

// photo 3
        {PhotoData: ko.observable(
            "R0lGODdhZABkAOMAAMzMzJaWlrGxsaOjo8XFxZycnLe3t6qqqr6+vgAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAZABkAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu99w8CFwaAkKBQGUQOfMPQYBAnMGUH0bfx0EhQCHRgIBA5EEEpF4CBIEknmVAZ6Zm3oXgYxGfAWBA513qgCEc5iSCJiuAQawFp51SX2JvQESBap8eonBw4IWCLhIv5V1vrvOE4eOFMS8dQMFz7XHANjGAMLgyRMGetjNqH180AGUrwGYsJS1t/MUkIP565O17+oQmMMJAIICtjIRFEWBYKkj1tq4iwNpV5yLGDNq3Mixo8ePHyBDihxJsqTJkyhTqlzJsqXLlzBjypxJs6bNmzi5RAAAOw==")}

    ]);
    this.draggedPhoto = ko.observable();
  
    this.handleDragStart = function(photo, e) {
        console.log(photo);
        this.draggedPhoto(photo);
        console.log('dragStart');   
        // Returning true is required to stop KO squashing the default action
        //...