2

问题是关于constrainTo插件jquery.pep.js中的选项。

tl，dr：如何动态分配constrainTo为任意 jQuery 元素？

示例：在下面的代码中，我嵌套了 div：pep-grandparent > pep-parent > pep。在初始化中$('.pep').pep()，我想分配constrainTo给 pep 的“祖父母”元素，属于 pep-grandparent 类。由于祖父母的大小可以改变，我想要一个constrainTo.

记录的选项constrainTo是“父级”或数组[上、右、下、左]。我天真地通过了数组的原位计算。但是我观察到此分配仅适用于.pep(). 如果我调整浏览器的大小（注意 css 中的 % 宽度规范 - 动态行为的技巧），pep 仍然受限于其旧的constrainTo. 但是，如果constrainTo碰巧是“父”（即 pep-parent 元素），则约束确实是动态的。

我试图阅读源代码，但我不是 Javascript 忍者，所以没有乱来。

问题 1：是否可以将另一个 jQuery 元素分配给constrainTo？

问题 2：我可以重新分配constrainTo（比如说）阻力initiate吗？如果是这样，我该怎么做？

问题 3：关于这个 hack 解决方案的意见：设置constrainTo并false处理 drag 中的约束逻辑initiate/start/move/stop。我试过这个，它工作，但不知何故我觉得本机constrainTo更流畅。

注意：我在代码中自由地混合了 html 类和 id ——草率，但对于这个例子来说还可以。

html

   <div id='pgp1' class='pep-grandparent'>
     <div id='pp1' class='pep-parent'>
       <div id='p1' class='pep'></div>
     </div>
   </div>

css

.pep-grandparent {
    background: white;
    height: 400px;
    width: 70%;
    border: 1px solid black;
}

.pep-parent {
    background: blue;
    height: 100px;
    width: 30%;
}

.pep {
    background: red;
    height: 50px;
    width: 50px;
}

js

 $('.pep').pep({
            constrainTo: function(){
                var $p = $('#p1');     //pep element
                var $pGP = $('#pgp1');  //pep-grandparent element
                var top = $pGP.offset()['top'];
                var right = $pGP.offset()['left'] + $pGP.width() - $p.width();
                var bottom = $pGP.offset()['top'] + $pGP.height() - $p.height();
                var left = $pGP.offset()['left'];
                return [top, right, bottom, left];
            }(),
            //**OPTION** constrainTo: 'parent',
            useCSSTranslation: false
        });
4

1 回答 1

0

我还必须能够动态更改约束。这是我的做法：

$('.pep').data('plugin_pep').options.constrainTo = [top, right, bottom, left];

调用插件后，没有一种访问约束的好方法。但是您可以通过元素数据访问 pep 对象并像那样更改它，并且它可以工作。每次约束发生变化时，您只需要更新 constrainTo 属性。

于 2014-08-27T15:57:28.683 回答