2010-03-12 03:18:34 +00:00
<!DOCTYPE html>
2009-01-15 21:57:33 +00:00
< html lang = "en" >
< head >
2010-09-10 13:17:58 +00:00
< meta charset = "utf-8" >
2009-01-15 21:57:33 +00:00
< title > jQuery UI Draggable - Cursor style< / title >
2010-09-10 13:17:58 +00:00
< link rel = "stylesheet" href = "../../themes/base/jquery.ui.all.css" >
2012-03-22 13:45:22 +00:00
< script src = "../../jquery-1.7.2.js" > < / script >
2010-09-10 13:17:58 +00:00
< script src = "../../ui/jquery.ui.core.js" > < / script >
< script src = "../../ui/jquery.ui.widget.js" > < / script >
2012-01-28 15:45:55 +00:00
< script src = "../../ui/jquery.ui.interaction.js" > < / script >
2010-09-10 13:17:58 +00:00
< script src = "../../ui/jquery.ui.draggable.js" > < / script >
< link rel = "stylesheet" href = "../demos.css" >
< style >
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; }
2009-01-15 21:57:33 +00:00
< / style >
2010-09-10 13:17:58 +00:00
< script >
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;
}
});
2009-01-15 21:57:33 +00:00
$(function() {
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;
}
});
2009-01-15 21:57:33 +00:00
});
< / script >
< / head >
< body >
2010-09-10 13:17:58 +00:00
2009-01-15 21:57:33 +00:00
< div class = "demo" >
2012-01-28 15:45:55 +00:00
2009-01-15 21:57:33 +00:00
< div id = "draggable" class = "ui-widget-content" >
2012-01-28 15:45:55 +00:00
< p > I will always stick to the center (relative to the pointer)< / p >
2009-01-15 21:57:33 +00:00
< / div >
< div id = "draggable2" class = "ui-widget-content" >
2012-01-31 03:26:33 +00:00
< p > My cursor position is always at the top< / p >
2009-01-15 21:57:33 +00:00
< / div >
< / div > <!-- End demo -->
2010-09-10 13:17:58 +00:00
< div class = "demo-description" >
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 >
2009-01-15 21:57:33 +00:00
< / div > <!-- End demo - description -->
2010-09-10 13:17:58 +00:00
2009-01-15 21:57:33 +00:00
< / body >
< / html >
