How to refer to the disabled option from inside a create event in jQuery UI?

How do I refer to the disabled option from inside a create event?

The code below works, but I would like to do it slightly cleaner and shorter by not referring to $(this), but instead to the "event" and "ui" parameters. I lack the knowledge to understand or know how to work with these parameters.

$(".myDroppables").droppable({
    c开发者_C百科reate: function (event, ui) {
        //If class is full then set option disabled to true.
        if ($(this).hasClass('full'))
            $(this).droppable("option", "disabled", true);
    }
});

I imagine that it would look something like this:

$(".myDroppables").droppable({
    create: function (event, ui) {
        if ($(this).hasClass('full'))
            this.disabled = true;
    }
});

How do I do it?

---

The callback arguments are documented in the droppable widget's overview:

All callbacks receive two arguments: The original browser event and a prepared ui object:

• ui.draggable - current draggable element, a jQuery object.
• ui.helper - current draggable helper, a jQuery object.
• ui.position - current position of the draggable helper { top: , left: }
• ui.offset - current absolute position of the draggable helper { top: , left: }

That said, the ui argument passed to a dropcreate callback won't expose any of these properties (fiddle), probably because it's too early in the widget's lifecycle for them to have any meaning.

In your particular case, you're more or less forced to use this in order to apply the disabled option. However, you can cache the return value of $(this) to slightly improve performance:

$(".myDroppables").droppable({
    create: function(event, ui) {
        var $this = $(this);
        // If class is full then set option disabled to true.
        if ($this.hasClass("full")) {
            $this.droppable("option", "disabled", true);
        }
    }
});