Modfying DOM elements involved in a jQuery function

Specifically, drag and drop using jQuery.

                        $(".note").droppable({
                            drop: function () {

           开发者_Python百科                 }
                        });

How do I get the DOM element that:

1) Is being dragged/dropped?

2) Is being dropped onto?

Follow up question: Any suggestions on how I could have answered this question on my own?

If you hook the drop event of the draggable with a function accepting two arguments, event and ui, then this is the raw DOM element of the droppable the draggable was dropped on, and ui.draggable is the draggable.

From the docs on the drop event:

This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable.

There they've said the droppable is $(this), but that's because they assume you want a jQuery instance wrapped around it. this will be the raw DOM element.

E.g.:

$("your selector here").droppable({
    drop: function(event, ui) {
        // this = raw DOM element of droppable
        // $(this) = creates jQuery wrapper around the DOM element
        // `ui.draggable` = draggable

        // Let's make the draggable red, and the droppable blue:
        ui.draggable.css("color", "red");
        $(this).css("color", "blue");
    }
});

Here's a live copy one of their examples with the above in action.