4
<title>jQuery UI Droppable - Visual feedback</title>
5
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7
<script type="text/javascript" src="../../ui/ui.core.js"></script>
8
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
9
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
10
<link type="text/css" href="../demos.css" rel="stylesheet" />
11
<style type="text/css">
12
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
13
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
15
<script type="text/javascript">
17
$("#draggable").draggable();
18
$("#droppable").droppable({
19
hoverClass: 'ui-state-active',
20
drop: function(event, ui) {
21
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
25
$("#draggable2").draggable();
26
$("#droppable2").droppable({
27
accept: "#draggable2",
28
activeClass: 'ui-state-hover',
29
drop: function(event, ui) {
30
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
40
<h3 class="docs">Feedback on hover:</h3>
42
<div id="draggable" class="ui-widget-content">
43
<p>Drag me to my target</p>
46
<div id="droppable" class="ui-widget-header">
50
<h3 class="docs">Feedback on activating draggable:</h3>
52
<div id="draggable2" class="ui-widget-content">
53
<p>Drag me to my target</p>
56
<div id="droppable2" class="ui-widget-header">
60
<!-- add active class demo -->
62
</div><!-- End demo -->
64
<div class="demo-description">
66
<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
68
</div><!-- End demo-description -->