mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
c07ae398fa
Conflicts: demos/draggable/constrain-movement.html demos/draggable/cursor-style.html demos/draggable/handle.html demos/draggable/index.html demos/draggable/revert.html demos/draggable/visual-feedback.html demos/index.html ui/jquery.ui.draggable.js ui/jquery.ui.droppable.js
72 lines
2.4 KiB
HTML
72 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery UI Draggable - Cursor style</title>
|
|
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
|
<script src="../../jquery-1.8.2.js"></script>
|
|
<script src="../../ui/jquery.ui.core.js"></script>
|
|
<script src="../../ui/jquery.ui.widget.js"></script>
|
|
<script src="../../ui/jquery.ui.interaction.js"></script>
|
|
<script src="../../ui/jquery.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>
|