Project

General

Profile

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.4.3.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
<div class="demo">
37

    
38
<h3 class="docs">With helpers:</h3>
39

    
40
<div id="draggable" class="ui-widget-content">
41
	<p>Original</p>
42
</div>
43

    
44
<div id="draggable2" class="ui-widget-content">
45
	<p>Semi-transparent clone</p>
46
</div>
47

    
48
<div id="draggable3" class="ui-widget-content">
49
	<p>Custom helper (in combination with cursorAt)</p>
50
</div>
51

    
52
<h3 class="docs">Stacked:</h3>
53
<div id="set">
54
	<div class="ui-widget-content">
55
		<p>We are draggables..</p>
56
	</div>
57

    
58
	<div class="ui-widget-content">
59
		<p>..whose z-indexes are controlled automatically..</p>
60
	</div>
61

    
62
	<div class="ui-widget-content">
63
		<p>..with the stack option.</p>
64
	</div>
65
</div>
66

    
67
</div><!-- End demo -->
68

    
69

    
70

    
71
<div class="demo-description">
72
<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>
73
<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>
74
</div><!-- End demo-description -->
75

    
76
</body>
77
</html>
(12-12/12)