Drag and drop events: activate, deactivate, drop, out, over
<html lang="en">
<head>
<title></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/ui.droppable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(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 = $("<p>").attr("id", "message").text(eventMessages[e.type]);
$("#status").empty().append(message);
}
$("#target").droppable(dropOpts);
});
</script>
</head>
<body>
<div id="drag">drag</div>
<div id="target">target</div>
<div id="status">status</div>
</body>
</html>
Related examples in the same category