aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/demos/draggable/handle.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/demos/draggable/handle.html')
-rw-r--r--static/development-bundle/demos/draggable/handle.html45
1 files changed, 45 insertions, 0 deletions
diff --git a/static/development-bundle/demos/draggable/handle.html b/static/development-bundle/demos/draggable/handle.html
new file mode 100644
index 0000000..8433a1e
--- /dev/null
+++ b/static/development-bundle/demos/draggable/handle.html
@@ -0,0 +1,45 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Draggable - Handles</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 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
12 #draggable p { cursor: move; }
13 </style>
14 <script type="text/javascript">
15 $(function() {
16 $("#draggable").draggable({ handle: 'p' });
17 $("#draggable2").draggable({ cancel: "p.ui-widget-header" });
18 $("div, p").disableSelection();
19 });
20 </script>
21</head>
22<body>
23<div class="demo">
24
25<div id="draggable" class="ui-widget-content">
26 <p class="ui-widget-header">I can be dragged only by this handle</p>
27</div>
28
29<div id="draggable2" class="ui-widget-content">
30 <p>You can drag me around&hellip;</p>
31 <p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
32</div>
33
34<!-- ADD CANCEL DEMO -->
35
36</div><!-- End demo -->
37
38<div class="demo-description">
39
40<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
41<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
42
43</div><!-- End demo-description -->
44</body>
45</html>
© 2015 Mike Crute