diff options
Diffstat (limited to 'demos/draggable/visual-feedback.html')
| -rw-r--r-- | demos/draggable/visual-feedback.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html new file mode 100644 index 000000000..333560567 --- /dev/null +++ b/demos/draggable/visual-feedback.html @@ -0,0 +1,54 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Draggable - Helper Demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.draggable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; } + </style> + <script type="text/javascript"> + $(function() { + $("#draggable").draggable({ helper: 'original' }); + $("#draggable2").draggable({ helper: 'clone' }); + $("#draggable3").draggable({ + cursor: 'move', + cursorAt: { top: -12, left: -20 }, + helper: function(event) { + return $('<div class="ui-widget-header">I\'m a custom helper</div>'); + } + }); + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="draggable" class="ui-widget-content"> + <p>Original</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>Clone</p> +</div> + +<div id="draggable3" class="ui-widget-content"> + <p>Custom helper (in combination with cursorAt)</p> +</div> + +<!-- ADD EXAMPLES FOR OPACITY + ZINDEX/STACK --> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> +<!-- Add description here --> +</p> + +</div><!-- End demo-description --> +</body> +</html> |