Mercurial > hg > ismi-richfaces
comparison src/main/webapp/imageServer/resources/js/jquery-ui-1.10.4/demos/draggable/visual-feedback.html @ 7:764f47286679
(none)
| author | jurzua |
|---|---|
| date | Wed, 29 Oct 2014 14:28:34 +0000 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| 6:ded3bccf2cf9 | 7:764f47286679 |
|---|---|
| 1 <!doctype html> | |
| 2 <html lang="en"> | |
| 3 <head> | |
| 4 <meta charset="utf-8"> | |
| 5 <title>jQuery UI Draggable - Visual feedback</title> | |
| 6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> | |
| 7 <script src="../../jquery-1.10.2.js"></script> | |
| 8 <script src="../../ui/jquery.ui.core.js"></script> | |
| 9 <script src="../../ui/jquery.ui.widget.js"></script> | |
| 10 <script src="../../ui/jquery.ui.mouse.js"></script> | |
| 11 <script src="../../ui/jquery.ui.draggable.js"></script> | |
| 12 <link rel="stylesheet" href="../demos.css"> | |
| 13 <style> | |
| 14 #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } | |
| 15 #draggable, #draggable2, #draggable3 { margin-bottom:20px; } | |
| 16 #set { clear:both; float:left; width: 368px; height: 120px; } | |
| 17 p { clear:both; margin:0; padding:1em 0; } | |
| 18 </style> | |
| 19 <script> | |
| 20 $(function() { | |
| 21 $( "#draggable" ).draggable({ helper: "original" }); | |
| 22 $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" }); | |
| 23 $( "#draggable3" ).draggable({ | |
| 24 cursor: "move", | |
| 25 cursorAt: { top: -12, left: -20 }, | |
| 26 helper: function( event ) { | |
| 27 return $( "<div class='ui-widget-header'>I'm a custom helper</div>" ); | |
| 28 } | |
| 29 }); | |
| 30 $( "#set div" ).draggable({ stack: "#set div" }); | |
| 31 }); | |
| 32 </script> | |
| 33 </head> | |
| 34 <body> | |
| 35 | |
| 36 <h3 class="docs">With helpers:</h3> | |
| 37 | |
| 38 <div id="draggable" class="ui-widget-content"> | |
| 39 <p>Original</p> | |
| 40 </div> | |
| 41 | |
| 42 <div id="draggable2" class="ui-widget-content"> | |
| 43 <p>Semi-transparent clone</p> | |
| 44 </div> | |
| 45 | |
| 46 <div id="draggable3" class="ui-widget-content"> | |
| 47 <p>Custom helper (in combination with cursorAt)</p> | |
| 48 </div> | |
| 49 | |
| 50 <h3 class="docs">Stacked:</h3> | |
| 51 <div id="set"> | |
| 52 <div class="ui-widget-content"> | |
| 53 <p>We are draggables..</p> | |
| 54 </div> | |
| 55 | |
| 56 <div class="ui-widget-content"> | |
| 57 <p>..whose z-indexes are controlled automatically..</p> | |
| 58 </div> | |
| 59 | |
| 60 <div class="ui-widget-content"> | |
| 61 <p>..with the stack option.</p> | |
| 62 </div> | |
| 63 </div> | |
| 64 | |
| 65 <div class="demo-description"> | |
| 66 <p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p> | |
| 67 <p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p> | |
| 68 </div> | |
| 69 </body> | |
| 70 </html> |