How do I refresh an animation so that it resets back to the beginning?

Question

So I created a drag and drop animation where the elements dissapear after they are dragged onto the target. I want to include a reset button that sets the animation back to the beginning so the user can play the drag and drop game again. Is there code I can include that resets the animation the same way that happens when you hit the browser refresh button?

Answer 1

Here is my current code, the draggable objects aren't set on the timeline, they just live on the stage
   function init(){
   // apply the draggable JQuery UI plugin to the Symbols on the stage
   sym.$('TIF_sym').draggable({
   start: function(e){},
   drag: function(e,ui){}
   sym.$('DXF_sym').draggable({
   start: function(e){},
   drag: function(e,ui){}
   sym.$('DWG_sym').draggable({
   start: function(e){},
   drag: function(e,ui){}
   sym.$('SHP_sym').draggable({
   start: function(e){},
   drag: function(e,ui){}
   sym.$('DEM_sym').draggable({
   start: function(e){},
   drag: function(e,ui){}
   // apply the droppable JQuery UI plugin to the Symbols on the stage
   sym.$("DataLayerObject").droppable({
   drop: function(e, ui) {
             // Hide Target Element Grey Box.
             sym.$("FirstDrag").hide();
             sym.$("Text").hide();
             // Hide file box
             var hideEle = "#" + ui.draggable.context.id;
                       console.log(ui);
                       $(hideEle).hide();
             //Play timeline for each data layer when correct file is dragged onto object
             sym.getComposition().getStage().getSymbol("DataLayerObject").getSymbol($(ui.draggabl e).attr("id").substring(6) + "_layer").play();