jquery 事件监听位置改变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18743144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery event listen on position changed
提问by mschmoock
I need to listen to an elements relative position. This is particular useful for dynamic layouting issues. There is no option to listen for CSS styles of even position() or offset() attributes.
我需要听一个元素的相对位置。这对于动态布局问题特别有用。没有选项可以侦听偶数 position() 或 offset() 属性的 CSS 样式。
Why:The relative position can change if a sibling change its dimension inside dialogs or forms (re-layout). So for interactive forms this can help to use i.e. the maximum available height or width of the parent or something like that.
原因：如果同级在对话框或表单中更改其尺寸（重新布局），则相对位置可能会更改。因此，对于交互式表单，这可以帮助使用即父级的最大可用高度或宽度或类似的东西。
回答by mschmoock
This custom jquery extension listens for object position by timer poll. I.m.o. there is no way to solve this without a timer, because position may be changed without jquery being invoked at all (i.e. re-layouting sibling elements). This solution watches the elements .position() and .offset() values. It can be easily improved to watch .css() styles or other stuff that is not covered by jQuery events.
此自定义 jquery 扩展通过计时器轮询侦听对象位置。我没有计时器就没有办法解决这个问题，因为位置可能会在根本不调用 jquery 的情况下改变（即重新布局兄弟元素）。此解决方案监视元素 .position() 和 .offset() 值。可以很容易地改进观看 .css() 样式或其他 jQuery 事件未涵盖的内容。
jQuery extension:
jQuery 扩展：
jQuery.fn.onPositionChanged = function (trigger, millis) {
if (millis == null) millis = 100;
var o = $(this[0]); // our jquery object
if (o.length < 1) return o;
var lastPos = null;
var lastOff = null;
setInterval(function () {
if (o == null || o.length < 1) return o; // abort if element is non existend eny more
if (lastPos == null) lastPos = o.position();
if (lastOff == null) lastOff = o.offset();
var newPos = o.position();
var newOff = o.offset();
if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
$(this).trigger('onPositionChanged', { lastPos: lastPos, newPos: newPos });
if (typeof (trigger) == "function") trigger(lastPos, newPos);
lastPos = o.position();
}
if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
$(this).trigger('onOffsetChanged', { lastOff: lastOff, newOff: newOff});
if (typeof (trigger) == "function") trigger(lastOff, newOff);
lastOff= o.offset();
}
}, millis);
return o;
};
Call it by:
通过以下方式调用它：
$("#<SOME_ID>").onPositionChanged(function(){alert("foobar")});
回答by tarekahf
This is my solution which is based on willsteel solution. I had to monitor the changes to the widthand offsetWidth. This will trigger the function even if the element has become invisible/visible due to any reason.
这是我基于 willsteel 解决方案的解决方案。我必须监视对width和的更改offsetWidth。即使元素由于任何原因变得不可见/可见，这也会触发该功能。
See updated code below:
请参阅下面的更新代码：
jQuery.fn.onPositionChanged = function (trigger, millis) {
if (millis == null) millis = 100;
var o = $(this[0]); // our jquery object
if (o.length < 1) return o;
var lastPos = null;
var lastOff = null;
var lastWidth = null;
var lastOffWidth = null;
setInterval(function () {
if (o == null || o.length < 1) return o; // abort if element is non existend eny more
if (lastPos == null) lastPos = o.position();
if (lastOff == null) lastOff = o.offset();
if (lastWidth == null) lastWidth = o.width();
if (lastOffWidth == null) lastOffWidth = o[0].offsetWidth;
var newPos = o.position();
var newOff = o.offset();
var newWidth = o.width();
var newOffWidth = o[0].offsetWidth;
if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
$(this).trigger('onPositionChanged', { lastPos: lastPos, newPos: newPos });
if (typeof (trigger) == "function") trigger(lastPos, newPos);
lastPos = o.position();
}
if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
$(this).trigger('onPositionChanged', { lastOff: lastOff, newOff: newOff});
if (typeof (trigger) == "function") trigger(lastOff, newOff);
lastOff= o.offset();
}
if (lastWidth != newWidth) {
$(this).trigger('onPositionChanged', { lastWidth: lastWidth, newWidth: newWidth});
if (typeof (trigger) == "function") trigger(lastWidth, newWidth);
lastWidth= o.width();
}
if (lastOffWidth != newOffWidth) {
$(this).trigger('onPositionChanged', { lastOffWidth: lastOffWidth, newOffWidth: newOffWidth});
if (typeof (trigger) == "function") trigger(lastOffWidth, newOffWidth);
lastWidth= o.width();
}
}, millis);
return o;
};
回答by Dmtriy Proskurin
My variant of code above that will work on multiple objects and based on any selector, but it does not work with jQuery exactly.
我上面的代码变体将适用于多个对象并基于任何选择器，但它并不完全适用于 jQuery。
var onPositionChanged = function (selector,trigger, millis) {
if (millis == null) millis = 200;
setInterval(function(){
var o_s = jQuery(selector); // our jquery object
if (o_s.length < 1) return o_s;
for(var i = 0; i<o_s.length; i++)
{
var o = o_s.eq(i);
var lastPos = jQuery(o).attr("lastPos");
var lastOff = jQuery(o).attr("lastOff");
lastPos = ((lastPos == "" || lastPos == undefined) ? null : JSON.parse(lastPos));
lastOff = ((lastOff == "" || lastOff == undefined) ? null : JSON.parse(lastOff));
setTimeout(function (o) {
if (o == null || o.length < 1) return o; // abort if element is non existend eny more
if (lastPos == null) lastPos = o.position();
if (lastOff == null) lastOff = o.offset();
var newPos = o.position();
var newOff = o.offset();
if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
jQuery(this).trigger('onPositionChanged', { lastPos: lastPos, newPos: newPos });
if (typeof (trigger) == "function") trigger(o,lastPos, newPos);
lastPos = o.position();
jQuery(o).attr("lastPos",JSON.stringify(lastPos));
}
if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
jQuery(this).trigger('onOffsetChanged', { lastOff: lastOff, newOff: newOff});
if (typeof (trigger) == "function") trigger(o,lastOff, newOff);
lastOff= o.offset();
jQuery(o).attr("lastOff",JSON.stringify(lastOff));
}
}, millis,o);
}
},millis);
};
};
Usage example:
用法示例：
jQuery(document).ready(function(){
onPositionChanged(".grid-item:not(.d-none)",function(object){
var left_percentage = parseInt(jQuery(object).position().left / jQuery(object).parent().width() * 100);
var parent_width = jQuery(object).parent().width();
var percentage_of_parent = parseInt(jQuery(object).width() / parent_width * 100);
if(left_percentage > 74 && percentage_of_parent >= 25
|| left_percentage > 66 && percentage_of_parent >= 33
|| left_percentage > 49 && percentage_of_parent >= 50)
{
jQuery(object).find(".card").css("margin-right","0px");
jQuery(object).parent().masonry('layout');
}
if(left_percentage < 1)
{
jQuery(object).find(".card").css("margin-left","0px");
jQuery(object).parent().masonry('layout');
}
});
});
});
