jquery - 到达容器时调整元素大小
Posted
技术标签:
【中文标题】jquery - 到达容器时调整元素大小【英文标题】:jquery - Resize element ondrag when reaches container 【发布时间】:2010-11-26 10:05:33 【问题描述】:我有一个标准 div,它设置为在其父级中拖动和调整大小。我需要能够调整 div 的大小,因为它被拖到它的父级中。我只需要在垂直拖动到底部时发生这种情况,所以我有这样的设置:
$("#draggable").draggable(
drag: function(event, ui) AtBottom(); ,
axis:'y', containment:'parent'
);
然后我计算可拖动元素和它的容器的底部位置(减去偏移量),并在它更大时重新调整它的大小..
function AtBottom()
var Cpos = $('#Container').position();
var cheight = $('#Container').height();
var Boundry = Cpos.top+cheight;
var pos = $("#draggable").position();
var height = $("#draggable").height();
var bottom = pos.top+height+10; /*10 as offset */
if(bottom>Boundry)
$("#draggable").height((height-10));
jquery 似乎在整个拖动过程中存储元素属性并且不重新计算它们,这对性能有意义,但不允许它以我想要的方式工作 -> 否则它会这样做应该。每次拖动时,高度都会降低 10。
有没有办法强制 Jquery 重新计算位置? -> 我已经尝试过启用/禁用..
【问题讨论】:
【参考方案1】:我不得不做一些类似于你正在做的事情,即基于可拖动区域大于容器(如可拖动地图)创建一个约束。我编辑了 jquery-ui.js 来执行以下操作,类似于包含,但称为约束。
在你的代码中设置它,就像你想收容一样:
$("#draggable").draggable(
axis: 'y',
constraint: 'parent'
);
第 731 行:
constraint: false,
第 849 行:
//Set a constraint if given in the options
if(o.constraint)
this._setConstraint();
第 1071 行:
_setConstraint: function()
var o = this.options;
if(o.constraint == 'parent') o.constraint = this.helper[0].parentNode;
if(o.constraint == 'document' || o.constraint == 'window') this.constraint = [
0 - this.offset.relative.left - this.offset.parent.left,
0 - this.offset.relative.top - this.offset.parent.top,
$(o.constraint == 'document' ? document : window).width() - this.helperProportions.width - this.margins.left,
($(o.constraint == 'document' ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top
];
if(!(/^(document|window|parent)$/).test(o.constraint) && o.constraint.constructor != Array)
var ce = $(o.constraint)[0]; if(!ce) return;
var co = $(o.constraint).offset();
var over = ($(ce).css("overflow") != 'hidden');
this.constraint = [
co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left,
co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top,
co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,
co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top
];
else if(o.constraint.constructor == Array)
this.constraint = o.constraint;
,
第 1142 行,在 _generatePosition 函数中:
if(this.constraint)
if(event.pageX - this.offset.click.left > this.constraint[0]) pageX = this.constraint[0] + this.offset.click.left;
if(event.pageY - this.offset.click.top > this.constraint[1]) pageY = this.constraint[1] + this.offset.click.top;
if(event.pageX - this.offset.click.left < this.constraint[2]) pageX = this.constraint[2] + this.offset.click.left;
if(event.pageY - this.offset.click.top < this.constraint[3]) pageY = this.constraint[3] + this.offset.click.top;
【讨论】:
以上是关于jquery - 到达容器时调整元素大小的主要内容,如果未能解决你的问题,请参考以下文章
如何防止 Bootstrap 崩溃的子项在崩溃崩溃时调整大小
如何在使用 jQuery(可拖动和可调整大小)拖动光标时调整图像大小