Question

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.

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.

The only difference between the two code sections below is the latter has the addition of
start: handleDragEvent and it’s associated function to write “Moved”.

Code Works:

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 no longer works:

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; 
}

Answer 1

You need to pass in the event and ui parameters to your handleDragEvent() and handleDropEvent() functions.

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: function(event, ui) { handleDropEvent(event, ui); }
  });
}