jquery事件听取位置的变化

Question

我需要倾听元素的相对位置.这对于动态布局问题特别有用.没有选项可以监听偶数position()或offset()属性的CSS样式.

原因: 如果兄弟姐妹在对话框或表单中更改其维度(重新布局),则相对位置可能会发生变化.因此,对于交互式表单,这可以帮助使用,即父级的最大可用高度或宽度或类似的东西.

Answer 1

此自定义jquery扩展通过计时器轮询侦听对象位置.Imo没有办法在没有计时器的情况下解决这个问题,因为在没有调用jquery的情况下可以改变位置(即重新布局兄弟元素).此解决方案监视元素.position()和.offset()值.可以很容易地改进以观察.css()样式或jQuery事件未涵盖的其他内容.

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;
};

称之为:

$("#<SOME_ID>").onPositionChanged(function(){alert("foobar")});