Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
	<meta charset="utf-8">
5
	<title>jQuery UI Droppable - Accept</title>
6
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7
	<script src="../../jquery-1.4.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
	<script src="../../ui/jquery.ui.droppable.js"></script>
13
	<link rel="stylesheet" href="../demos.css">
14
	<style>
15
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
16
	#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
17
	</style>
18
	<script>
19
	$(function() {
20
		$( "#draggable, #draggable-nonvalid" ).draggable();
21
		$( "#droppable" ).droppable({
22
			accept: "#draggable",
23
			activeClass: "ui-state-hover",
24
			hoverClass: "ui-state-active",
25
			drop: function( event, ui ) {
26
				$( this )
27
					.addClass( "ui-state-highlight" )
28
					.find( "p" )
29
						.html( "Dropped!" );
30
			}
31
		});
32
	});
33
	</script>
34
</head>
35
<body>
36
 
37
<div class="demo">
38
 
39
<div id="draggable-nonvalid" class="ui-widget-content">
40
	<p>I'm draggable but can't be dropped</p>
41
</div>
42
 
43
<div id="draggable" class="ui-widget-content">
44
	<p>Drag me to my target</p>
45
</div>
46
 
47
<div id="droppable" class="ui-widget-header">
48
	<p>accept: '#draggable'</p>
49
</div>
50
 
51
</div><!-- End demo -->
52
 
53
 
54
 
55
<div class="demo-description">
56
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
57
</div><!-- End demo-description -->
58
 
59
</body>
60
</html>