library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Draggable demos: Implement axis and containment options in constrain-movement demo.

Browse Source
This commit is contained in:
Scott González 2012-01-20 22:08:37 -05:00
parent 20e87070a6
commit 7c9fd7a6d4
1 changed files with 74 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
demos/draggable/constrain-movement.html
View File

@ -7,7 +7,7 @@
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.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>
@ -18,11 +18,83 @@
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
</style>
<script>
$.ui.draggable.prototype.options.axis = null;
$( document ).bind( "dragstart", function( event, ui ) {
var axis,
draggable = $( event.target ).data( "draggable" );
if ( !draggable || !draggable.options.axis ) {
return;
}
axis = draggable.options.axis;
function drag( event, ui ) {
if ( axis === "x" ) {
ui.position.top = ui.startPosition.top;
} else {
ui.position.left = ui.startPosition.left;
}
}
draggable.element
.bind( "drag", drag )
.one( "dragstop", function() {
draggable.element.unbind( "drag", drag );
});
});
$.ui.draggable.prototype.options.containment = null;
$.ui.draggable.prototype._getContainment = function() {
return this.options.containment === "parent" ?
this.element.parent() :
$( this.options.containment );
};
$( document ).bind( "dragstart", function( event, ui ) {
var elem, container, offset, left, top, right, bottom,
draggable = $( event.target ).data( "draggable" );
if ( !draggable || !draggable.options.containment ) {
return;
}
elem = ui.helper || draggable.element;
container = draggable._getContainment();
offset = container.offset();
left = offset.left +
(parseFloat( $.curCSS( container[0], "borderLeftWidth", true ) ) || 0) +
(parseFloat( $.curCSS( container[0], "paddingLeft", true ) ) || 0);
top = offset.top +
(parseFloat( $.curCSS( container[0], "borderTopWidth", true ) ) || 0) +
(parseFloat( $.curCSS( container[0], "paddingTop", true ) ) || 0);
right = left + container.width();
bottom = top + container.height();
function drag( event, ui ) {
var leftDiff = ui.startOffset.left + ui.startPosition.left,
topDiff = ui.startOffset.top + ui.startPosition.top;
ui.position.left = Math.max( ui.position.left, left - leftDiff );
ui.position.left = Math.min( ui.position.left,
right - elem.outerWidth() - leftDiff );
ui.position.top = Math.max( ui.position.top, top - topDiff );
ui.position.top = Math.min( ui.position.top,
bottom - elem.outerHeight() - topDiff );
}
draggable.element
.bind( "drag", drag )
.one( "dragstop", function() {
draggable.element.unbind( "drag", drag );
});
});
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
$( "#draggable4" ).draggable({ containment: "#demo-frame" });
$( "#draggable5" ).draggable({ containment: "parent" });
});