I'm a snap target


Default (snap: true), snaps to all other draggable elements

I only snap to the big box

I only snap to the outer edges of the big box

I snap to a 20 x 20 grid

I snap to a 80 x 80 grid

Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.

Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.

actions/github-actions-e7ab6fa4fa The official jQuery user interface library: https://github.com/jquery/jquery-uiwww-data
aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual/draggable/replaced.html
blob: 38931f34576377c7c7f6e3d32bc217b0d72faa64 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Draggable Visual Test</title>
	<link rel="stylesheet" href="../../../themes/base/all.css">
	<script src="../../../external/requirejs/require.js"></script>
	<script src="../../../demos/bootstrap.js">
		$( "#draggable" )
			.draggable()
			.on( "mousedown", function() {
				$( this ).html( "<div>replaced</div>" );
			});
	</script>

	<style>
	#draggable {
		background: green;
		height: 75px;
		width: 75px;
	}
	</style>
</head>
<body>

<p>WHAT: A draggable, whose content is replaced onmousedown.</p>
<p>EXPECTED: In IE8, the draggable can actually be dragged.</p>

<div id="draggable"><div>content</div></div>

</body>
</html>