Drag and Drop symbol action issue! Help!

Hi,

I am constructing a risk radar and am looking for an object to change state when put on the middle of a target. And once removed from the middle of the target, to change back to its original state, I so far have this code:

// insert code to be run when the symbol is created here

yepnope({nope:['jquery-ui-1.10.0.custom.min.js','jquery.ui.touch-punch .min.js'], complete: init});

function init(){

          //Use the code! Draggable! Droppable!!

          sym.$('risk1').draggable();

          sym.$('risk2').draggable();

          sym.$('risk3_orange').draggable();

          sym.$('risk4').draggable();

          sym.$('risk5').draggable();

          sym.$('risk6').draggable();

          sym.$('risk7').draggable();

          sym.$('risk8').draggable();

          sym.$('risk9').draggable();

          sym.$('risk10').draggable();

          //Droppable... on the target!

          sym.$('Target').droppable({drop: function() {sym.getSymbol("risk3_orange").play();}});

}

However, when I remove the object from the middle of the target ('Target') it does not change back and then changes back and forth whenever moved from then on,

Can you help?