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: Moved containment extension into jquery.ui.draggable.js. Removed axis extension from constrain-movement demo.

Browse Source
This commit is contained in:
Scott González 2012-01-30 20:57:52 -05:00
parent cac6901799
commit 62ce3e0f87
2 changed files with 94 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,81 +18,17 @@
#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.originalPosition.top;
} else {
$(function() {
$( "#draggable" ).draggable({
drag: function( event, ui ) {
ui.position.left = ui.originalPosition.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.originalOffset.left - ui.originalPosition.left,
topDiff = ui.originalOffset.top - ui.originalPosition.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" });
});
$( "#draggable2" ).draggable({
drag: function( event, ui ) {
ui.position.top = ui.originalPosition.top;
}
});
$( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
$( "#draggable4" ).draggable({ containment: "#demo-frame" });
@ -134,7 +70,8 @@
<div class="demo-description">
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. The <code>containment</code> option allows you to specify any element to use as a containing box; you can pass any selector or the string "parent".</p>
<p>The draggable element can also be constrained with custom logic inside a drag event handler. Modifying the <code>ui.position</code> object's <code>left</code> and/or <code>top</code> properties will change where the element will be positioned. In this example, we're forcing the top or left to always be the same as where it started, resulting in the element being confined to a specific axis.</p>
</div><!-- End demo-description -->
</body>

83
ui/jquery.ui.draggable.js vendored
View File

@ -374,4 +374,87 @@ $.widget( "ui.draggable", $.ui.interaction, {
}
});
$.widget( "ui.draggable", $.ui.draggable, {
// $.widget doesn't know how to handle redefinitions with a custom prefix
// custom prefixes are going away anyway, so it's not worth fixing right now
widgetEventPrefix: "drag",
options: {
containment: null
},
_create: function() {
this._super();
this._bind({
dragstart: "_setContainment",
drag: "_contain"
});
},
_setContainment: function( event, ui ) {
var offset, left, top,
container = this._getContainer();
if ( !container ) {
this.containment = null;
return;
}
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);
this.containment = {
left: left,
top: top,
right: left + container.width(),
bottom: top + container.height(),
leftDiff: ui.originalOffset.left - ui.originalPosition.left,
topDiff: ui.originalOffset.top - ui.originalPosition.top,
width: this.dragEl.outerWidth(),
height: this.dragEl.outerHeight()
};
},
_contain: function( event, ui ) {
var containment = this.containment;
if ( !containment ) {
return;
}
ui.position.left = Math.max( ui.position.left,
containment.left - containment.leftDiff );
ui.position.left = Math.min( ui.position.left,
containment.right - containment.width - containment.leftDiff );
ui.position.top = Math.max( ui.position.top,
containment.top - containment.topDiff );
ui.position.top = Math.min( ui.position.top,
containment.bottom - containment.height - containment.topDiff );
},
_getContainer: function() {
var container,
containment = this.options.containment;
if ( !containment ) {
container = null;
} else if ( containment === "parent" ) {
container = this.element.parent();
} else {
container = $( containment );
if ( !container.length ) {
container = null;
}
}
return container;
}
});
})( jQuery );