title: How to implement drag and drop through android webview
body: <p>I implemented the simple webview app through android to point to an html file which will be used to drag and drop icons like a simple puzzle game. I used the jquery draggable and droppable libraries to implement on the html-side, but when I pulled it up on the webview, it didn't work. After searching the forums, I tried several fixes and none of them worked. I think that this post could be the answer, but it also didn't work out: <a href="https://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices">Javascript Drag and drop for touch devices</a>. Although, I don't think I implemented it properly, since I just added it on to the code which uses the draggable/droppable from jquery.ui. </p>
  
  <p>Here's the draggable/droppable code:</p>
  
  <pre><code> $(document).ready(function() {
      init(); 
   $( "#draggable" ).draggable({
              snap:"#droppable", snapMode: "inner", revert: "valid"});
      $( "#droppable" ).droppable({
          drop: function( event, ui ) {
              $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                      .html( "Dropped!" );
          },
          out: function( event, ui ) {
              $( this )
                  .removeClass( "ui-state-highlight" )
                  .find( "p" )
                      .html( "Drop here" );
          }
      });
    });
  </code></pre>
  
  <p>here's the touch handler implementation:</p>
  
  <pre><code> function touchHandler(event)
  {
   var touches = event.changedTouches,
  first = touches[0],
  type = "";
  
   switch(event.type)
  {
  case "touchstart": type = "mousedown"; break;
  case "touchmove":  type="mousemove"; break;        
  case "touchend":   type="mouseup"; break;
  default: return;
  }
  var simulatedEvent = document.createEvent("MouseEvent");
  simulatedEvent.initMouseEvent(type, true, true, window, 1,
                        first.screenX, first.screenY,
                        first.clientX, first.clientY, false,
                        false, false, false, 0/*left*/, null);
  
  first.target.dispatchEvent(simulatedEvent);
  event.preventDefault();
  }
  
  function init()
  {
  document.addEventListener("touchstart", touchHandler, true);
  document.addEventListener("touchmove", touchHandler, true);
  document.addEventListener("touchend", touchHandler, true);
  document.addEventListener("touchcancel", touchHandler, true);    
  }
  </code></pre>
  
  <p>In the body of the html, I am using divs to call out the draggable and droppable. 
  Not sure why it's not working...any guidance would be appreciated. </p>