library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Draggable demo: Inlined the cursorAt logic in the cursor-style demo.

Browse Source
This commit is contained in:
Scott González 2012-01-30 22:26:33 -05:00
parent 62ce3e0f87
commit 6c15eda086
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
demos/draggable/cursor-style.html
View File

@ -40,9 +40,17 @@
}); });
$(function() { $(function() {
$( "#draggable" ).draggable({ cursorAt: { top: 56, left: 56 } }); $( "#draggable" ).draggable({
$( "#draggable2" ).draggable({ cursorAt: { top: -5, left: -5 } }); beforeStart: function( event, ui ) {
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } }); 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> </script>
</head> </head>
@ -55,11 +63,7 @@
</div> </div>
<div id="draggable2" class="ui-widget-content"> <div id="draggable2" class="ui-widget-content">
<p>My cursor is at left -5 and top -5</p> <p>My cursor position is always at the top</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>My cursor position is only controlled for the 'bottom' value</p>
</div> </div>
</div><!-- End demo --> </div><!-- End demo -->
@ -67,7 +71,7 @@
<div class="demo-description"> <div class="demo-description">
<p>Position the cursor while dragging the object. By default the cursor appears wherever the user started the drag; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left).</p> <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><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>