0

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

2
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by Violet_82
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.