Draggable object reveals/hides text elements

You need to add a function to play certain things when you want. You put this function in the drop or the drag event.

See this very simple example. You will see that the fruit animation plays on the drop event.

https://app.box.com/s/uj6ihft6kd0pqgc8h5sc

So basically you can write your function either on the drag or on the drop event.

Yes. Either the drag event of draggable or the drop event of droppable - depending on what you want to do. of course every composition is different and people do things differently, but for a basic event when drag or drop, it is where you would put it.

resdesign - thanks for the example!

How would one go about using the drag and drop for elements - that don't immediately snap back if wrong - but is later checked if it is correct on a press of a button action.

I want to make some sort of "chronological timeline" where a user can drag elements to a timeline, click submit when they think they have the correct order - and then will get a response on which ones are correct/incorrect - if all correct then would go on to the next action, etc.

here is a cheesey flash example in somewhat same realm - http://www.cic.gc.ca/english/games/conf/index.asp

any advice would be appreciated!

That implies more than just drag and drop since you will need to check user answers for multiple objects before getting a feedback. You will need to write a function to handle all this.

haha! yeah i know - easier said than done!

i will dig around some more!

thank you!

Question regarding your sample dragNdrop - how would you apply a button to reset to original positions - as opposed to reloading the window - window.location.reload()

You should use css left and top to place them back where they were. I would put the original position in an array and then reposition them with a for loop. Let me kown if you need an example.

ok - yeah i would appreciate an example - since i haven't done anything to this point with CSS within AE.

thank you again!

I got something working!

I ended up using the following code to reset the elements:

sym.$('reset_btn').click(function(){

  for (i=0;i<draggableEl.length;i++){

  sym.$(draggableEl[i]).css({

  left: sym.$(draggableEl[i]).data("oleft"),

  top: sym.$(draggableEl[i]).data("otop")

  });

  sym.$(draggableEl[i]).draggable('enable');

  sym.$(droppableEl[i]).droppable('enable');

  }

});

Good job!

I had a similar problem that I got solved through this post;

Set a variable with an element's position and use it to trigger an event

Hope that might help