aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/demos/droppable/visual-feedback.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/demos/droppable/visual-feedback.html')
-rw-r--r--static/development-bundle/demos/droppable/visual-feedback.html70
1 files changed, 70 insertions, 0 deletions
diff --git a/static/development-bundle/demos/droppable/visual-feedback.html b/static/development-bundle/demos/droppable/visual-feedback.html
new file mode 100644
index 0000000..8f7e929
--- /dev/null
+++ b/static/development-bundle/demos/droppable/visual-feedback.html
@@ -0,0 +1,70 @@
1<!doctype html>
2<html lang="en">
3<head>
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; }
14 </style>
15 <script type="text/javascript">
16 $(function() {
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!');
22 }
23 });
24
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!');
31 }
32 });
33
34 });
35 </script>
36</head>
37<body>
38<div class="demo">
39
40<h3 class="docs">Feedback on hover:</h3>
41
42<div id="draggable" class="ui-widget-content">
43 <p>Drag me to my target</p>
44</div>
45
46<div id="droppable" class="ui-widget-header">
47 <p>Drop here</p>
48</div>
49
50<h3 class="docs">Feedback on activating draggable:</h3>
51
52<div id="draggable2" class="ui-widget-content">
53 <p>Drag me to my target</p>
54</div>
55
56<div id="droppable2" class="ui-widget-header">
57 <p>Drop here</p>
58</div>
59
60<!-- add active class demo -->
61
62</div><!-- End demo -->
63
64<div class="demo-description">
65
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>
67
68</div><!-- End demo-description -->
69</body>
70</html>
© 2015 Mike Crute