< html lang="en">
$(function() {
$("#drag").draggable();
var dropOpts = {
accept: "#drag",
activate: eventCallback,
deactivate: eventCallback,
drop: eventCallback,
out: eventCallback,
over: eventCallback
};
var eventMessages = {
dropactivate: "A draggable is active",
dropdeactivate: "A draggable is no longer active",
drop: "An accepted draggable was dropped on the droppable",
dropout: "An accepted draggable has been moved out of the droppable",
dropover: "An accepted draggable is over the droppable"
};
function eventCallback(e) {
var message = $("").attr("id", "message").text(eventMessages[e.type]);
$("#status").empty().append(message);
}
$("#target").droppable(dropOpts);
});
drag