Drag event not working - prevents drag and drop
<p>Edit: I'd still like to know the answer to this question for knowledge's sake. I managed to get a similar effect to what I want using the out event on a drop event though. </p>

<p>I have a working drag and drop that will record which box an image has been placed in. However, when I created a drag event to account for the fact a user removes an image from the box it breaks the drag and drop causing the images to be undraggable. </p>

<p>The only difference between the two code sections below is the latter has the addition of 
<code>start: handleDragEvent</code> and it's associated function to write "Moved". </p>

<p>Code Works: </p>

<pre><code>function init() {
  $('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img'});
  $('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable( {
    drop: handleDropEvent
  } );
}

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  var draggableId = ui.draggable.attr("id") + 'PLACE';      
  var droppableId = $(this).attr("id");             
  alert( 'BLARGH "' + draggableId + '" was dropped onto me!' + droppableId );
  document.getElementById(draggableId).value = droppableId; 
}
</code></pre>

<p>Code no longer works:</p>

<pre><code>function init() {
  $('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img', start: handleDragEvent});
  $('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable( {
    drop: handleDropEvent
  } );
}

function handleDragEvent( event, ui ) {
  var draggable = ui.draggable;
  var draggableId = ui.draggable.attr("id") + 'PLACE';      
  document.getElementById(draggableId).value = "Moved"; 
}

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  var draggableId = ui.draggable.attr("id") + 'PLACE';      
  var droppableId = $(this).attr("id");             
  alert( 'BLARGH "' + draggableId + '" was dropped onto me!' + droppableId );
  document.getElementById(draggableId).value = droppableId; 
}
</code></pre>
