title: implementing html5 drag and drop photos with knockout js , durandal 2.0
body: <p>I have a list of photos in a knockout js viewmodel and I want to be able to swap among them(actually the more correct term is copy one on top of another).
  Here is my simplified viewmodel:</p>
  
  <pre><code>define(['durandal/app', 'knockout', 'jquery'], function(app, ko, jquery) {
      var miscPhotos = ko.observableArray();
      var draggedPhoto = ko.observable();
  
      function handleDragStart(data, e) {
          // e.preventDefault();
          draggedPhoto(data);
          console.log('dragStart');
          return true;
      }
  
      function handleDragOver(e) {
          e.preventDefault();
          console.log('dragOver');
  
      }
  
      function handleDrop(e) {
          e.preventDefault();
          e.stopPropagation();
          console.log('drop');
  
      }
  
      return {
          miscPhotos: miscPhotos,
          handleDrop: handleDrop,
          handleDragOver: handleDragOver,
          handleDragStart: handleDragStart
      }
  
  });
  </code></pre>
  
  <p>And there goes the simplified UI also:</p>
  
  <pre><code>&lt;div id="holder" data-bind="foreach: miscPhotos"&gt;
      &lt;div class="pull-left well well-small"  draggable="true" 
          data-bind="event:{
                  dragstart: function(data, e){ $root.handleDragStart($data, e);},
                  dragover:function(data, e){ $root.handleDragOver( e);},
                  drop:function(data, e){ $root.handleDrop(e, $data);}}
       "&gt;
      &lt;div class="thumb"&gt;
          &lt;img class="thumb" 
              title="" style="display: block" 
              data-bind="attr: {src: 'data:image;base64,' + PhotoData()}"
          /&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>When I try to copy one photo on top of the other, only the dragstart event fires, dragover and drop won't fire.</p>