Jquery drag and drop

[Violet_82]

HI there, I am having a few problems understanding how drag and drop works in jquery.
Say I have this (which is taken from a text book): http://aharrisbooks.net/jad/chap_12/dragDrop.html
In the code you have

...
  //make all drag me elements draggable
      $(".dragMe").draggable();
      
      //set target as droppable
      $("#target").droppable();

      //bind events to target
      $("#target").bind("drop", changeTarget);
      $("#target").bind("dropout", resetTarget);


...

Now, draggable( ) and droppable() are all methods coming from a library in here http://jqueryui.com/download so that's ok but I don't quite understanding how the events are bound to the target.
Take these 2 methods $("#target").bind("drop", changeTarget); $("#target").bind("dropout", resetTarget); :
I thought the bind() method takes an event and binds it to a function, but are those "drop" and "droppable" events?! If so where am I supposed to get their names from, I mean how do I know that they exist and they have that name,it's driving me crazy!
I might as well say $("#target").bind("i_am_droppin_it", resetTarget); as far as I am concerned!
Also when creating the function changeTarget() which has this code

function changeTarget(event, ui){
      $("#target").addClass("ui-state-highlight")
      .html("Dropped ")
      .append(ui.draggable.text());
   } // end changeTarget

about the 2 parameters we pass to it, event and ui: "event" - or "e" I suppose depending on the preferences - effectively represents the event "drop" doesn't it? Whereas "ui" I assume is referring to the interface but where do I get ui.draggable.text() from? I mean how do I know that it even exist?
Could anybody shed a bit of light on it please?
thanks

[stbuchok]

All the stuff you are talking about is in the documentation:

http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
http://api.jquery.com/bind/

If you want to know all of the inner workings of absolutely everything that is happening, simply look at the source code, it's not like it's hidden from you.

[Violet_82]

Hi stbuchok,
thanks for the links, you're quite right most of the stuff is there. I had a good look and most of my questions are actually answered but I couldn't see anything about this

Take these 2 methods $("#target").bind("drop", changeTarget); $("#target").bind("dropout", resetTarget); :
I thought the bind() method takes an event and binds it to a function, but are those "drop" and "droppable" events?! If so where am I supposed to get their names from, I mean how do I know that they exist and they have that name,it's driving me crazy!

thanks