jquery-ui/demos/draggable/cursor-style.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Cursor style</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<script src="../../jquery-1.10.2.js"></script>
	<script src="../../ui/core.js"></script>
	<script src="../../ui/widget.js"></script>
	<script src="../../ui/interaction.js"></script>
	<script src="../../ui/draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$.ui.draggable.prototype.options.cursorAt = null;
	$( document ).bind( "dragbeforestart", function( event, ui ) {
		var cursorAt, elem,
			draggable = $( event.target ).data( "draggable" );

		if ( !draggable || !draggable.options.cursorAt ) {
			return;
		}

		elem = ui.helper || draggable.element;
		cursorAt = draggable.options.cursorAt;
		if ( "top" in cursorAt ) {
			ui.position.top += ui.pointer.y - ui.offset.top - cursorAt.top;
		}
		if ( "left" in cursorAt ) {
			ui.position.left += ui.pointer.x - ui.offset.left - cursorAt.left;
		}
		if ( "bottom" in cursorAt ) {
			ui.position.top += ui.pointer.y - ui.offset.top - elem.outerHeight() + cursorAt.bottom;
		}
		if ( "right" in cursorAt ) {
			ui.position.left += ui.pointer.x - ui.offset.left - elem.outerWidth() + cursorAt.right;
		}
	});

	$(function() {
		$( "#draggable" ).draggable({
			beforeStart: function( event, ui ) {
				ui.position.top += ui.pointer.y - ui.offset.top - $( event.target ).outerHeight() / 2;
				ui.position.left += ui.pointer.x - ui.offset.left - $( event.target ).outerWidth() / 2;
			}
		});
		$( "#draggable2" ).draggable({
			beforeStart: function( event, ui ) {
				ui.position.top += ui.pointer.y - ui.offset.top;
			}
		});
	});
	</script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
	<p>I will always stick to the center (relative to the pointer)</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>My cursor position is always at the top</p>
</div>

<div class="demo-description">
<p>The <code>beforeStart</code> callback allows you to position the draggable element in order to adjust where the draggable movements will be calculated from. In this example, we adjust the position to control where the element is relative to the pointer during the drag.</p>
</div>
</body>
</html>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`<html lang="en">`
			`<head>`
Draggable demos: Coding standards. 2010-09-10 13:17:58 +00:00			`<meta charset="utf-8">`
completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`<title>jQuery UI Draggable - Cursor style</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Updating jQuery to 1.10.2. Adding jQuery 1.10.0, 1.10.1, 1.10.2, 2.0.0, 2.0.1, 2.0.2 and 2.0.3 to the tests directory. 2013-06-01 19:25:27 +00:00			`<script src="../../jquery-1.10.2.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/core.js"></script>`
			`<script src="../../ui/widget.js"></script>`
Merge branch 'master' into interactions Conflicts: demos/draggable/constrain-movement.html demos/draggable/cursor-style.html demos/draggable/default.html demos/draggable/events.html demos/draggable/handle.html demos/draggable/revert.html demos/draggable/visual-feedback.html demos/droppable/default.html grunt.js tests/unit/draggable/draggable.html tests/unit/draggable/draggable_core.js tests/unit/draggable/draggable_options.js tests/unit/draggable/draggable_test_helpers.js tests/unit/droppable/droppable.html tests/unit/droppable/droppable_options.js ui/draggable.js ui/jquery.ui.droppable.js ui/sortable.js 2014-02-10 22:43:24 +00:00			`<script src="../../ui/interaction.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/draggable.js"></script>`
Draggable demos: Coding standards. 2010-09-10 13:17:58 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<style>`
removed margin-left rules from these draggable demos due to IE6 conflict 2009-02-27 04:06:52 +00:00			`#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }`
completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`</style>`
Draggable demos: Coding standards. 2010-09-10 13:17:58 +00:00			`<script>`
Draggable demo: Implemented cursorAt option in cursor-style demo. 2012-01-28 15:45:55 +00:00			`$.ui.draggable.prototype.options.cursorAt = null;`
			`$( document ).bind( "dragbeforestart", function( event, ui ) {`
			`var cursorAt, elem,`
			`draggable = $( event.target ).data( "draggable" );`

			`if ( !draggable \|\| !draggable.options.cursorAt ) {`
			`return;`
			`}`

			`elem = ui.helper \|\| draggable.element;`
			`cursorAt = draggable.options.cursorAt;`
			`if ( "top" in cursorAt ) {`
			`ui.position.top += ui.pointer.y - ui.offset.top - cursorAt.top;`
			`}`
			`if ( "left" in cursorAt ) {`
			`ui.position.left += ui.pointer.x - ui.offset.left - cursorAt.left;`
			`}`
			`if ( "bottom" in cursorAt ) {`
			`ui.position.top += ui.pointer.y - ui.offset.top - elem.outerHeight() + cursorAt.bottom;`
			`}`
			`if ( "right" in cursorAt ) {`
			`ui.position.left += ui.pointer.x - ui.offset.left - elem.outerWidth() + cursorAt.right;`
			`}`
			`});`

completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`$(function() {`
Draggable demo: Inlined the cursorAt logic in the cursor-style demo. 2012-01-31 03:26:33 +00:00			`$( "#draggable" ).draggable({`
			`beforeStart: function( event, ui ) {`
			`ui.position.top += ui.pointer.y - ui.offset.top - $( event.target ).outerHeight() / 2;`
			`ui.position.left += ui.pointer.x - ui.offset.left - $( event.target ).outerWidth() / 2;`
			`}`
			`});`
			`$( "#draggable2" ).draggable({`
			`beforeStart: function( event, ui ) {`
			`ui.position.top += ui.pointer.y - ui.offset.top;`
			`}`
			`});`
completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`
Draggable demos: Coding standards. 2010-09-10 13:17:58 +00:00
completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`<div id="draggable" class="ui-widget-content">`
Draggable demo: Implemented cursorAt option in cursor-style demo. 2012-01-28 15:45:55 +00:00			`<p>I will always stick to the center (relative to the pointer)</p>`
completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`</div>`

			`<div id="draggable2" class="ui-widget-content">`
Draggable demo: Inlined the cursorAt logic in the cursor-style demo. 2012-01-31 03:26:33 +00:00			`<p>My cursor position is always at the top</p>`
completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`</div>`

Draggable demos: Coding standards. 2010-09-10 13:17:58 +00:00			`<div class="demo-description">`
Draggable demo: Inlined the cursorAt logic in the cursor-style demo. 2012-01-31 03:26:33 +00:00			`<p>The <code>beforeStart</code> callback allows you to position the draggable element in order to adjust where the draggable movements will be calculated from. In this example, we adjust the position to control where the element is relative to the pointer during the drag.</p>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
completed reorganization of draggable demos 2009-01-15 21:57:33 +00:00			`</body>`
			`</html>`