Question

I always see this in the documentation.

$('.selector').draggable({
   start: function(event, ui) { ... }
});

In the jQuery documentation, what does “event” and “ui” represent and how can I use them?

Is there any way to pass the specific .selector object itself into the function?

I guess I don’t quite understand how this whole thing works without any examples.

I appreciate any help!

Answer 1

When it comes to jQuery, you need to embrace looking things up in the documentation, as for the most part it is pretty complete and will give you anything you need.

With that in mind, this is the documentation: on Draggables:

All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields:

• ui.helper – the jQuery object representing the helper that’s being dragged
• ui.position – current position of the helper as { top, left } object, relative to the offset element
• ui.offset – current absolute position of the helper as { top, left } object, relative to page

As far as the event object, here’s the documentation for that.

The most common usage of the event object is to prevent the default action. So if you have a link:

<a href="more.html" id="show_more">Show me more!</a>

And you want something to happen when the user clicks on it and has Javascript enabled, you might do:

$('#show_more').click(function(e) {
    alert('heya!');
});

The problem here is that after the alert shows up and you close it, the default action of the link (“go to another page”) is going to happen and the user will be sent to more.html. A lot of the time this isn’t what you want, so you then prevent the default action:

$('#show_more').click(function(e) {
    alert('heya!');
    e.preventDefault(); // cancel link event, could also return false;
});