jquery.pep.js中的動態拖拽約束

問題是關於插件jquery.pep.js中的constrainTo選項。jquery.pep.js中的動態拖拽約束

TL博士：我如何動態分配constrainTo爲任意的jQuery的元素？

示例：在下面的代碼我有嵌套div的：PEP-祖父母> PEP-父> PEP。在初始化$('.pep').pep()中，我想將constrainTo分配給pep的「祖父母」元素，即pep-grandparent。由於祖父母大小可以改變，我想要動態分配constrainTo。

constrainTo的documented選項是'parent'或數組[top，right，bottom，left]。天真地，我通過了一個原位計算陣列。但是我發現這個分配僅適用於.pep()的初始化。如果我調整瀏覽器的大小（請注意css中的％width規範 - 動態行爲的技巧），pep仍然受限於舊的constrainTo。然而，如果constrainTo碰巧是'父'（即：父 - 母元素），那麼約束確實是動態的。

我試圖讀取source，但我不是一個Javascript忍者，所以不在那裏亂七八糟。

問題1：是否可以將另一個jQuery元素分配給constrainTo？

問題2：我可以重新分配的（說）拖動initiateconstrainTo？如果是這樣，我該怎麼做？

問題3：意見邀請了這個技巧的解決方案：設置constrainTo到false和處理在拖動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; 
}

$('.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 
     });

來源

2013-11-09 user1685529

我必須能夠改變CON應變也是動態的。下面是我做的：

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

一旦你調用插件，沒有一種很好的方法來訪問約束。但是你可以通過元素數據訪問pep對象，並像這樣改變它，並且它可以工作。每次約束更改時，您只需更新constrainTo屬性。

來源

2014-08-27 15:57:28

jquery.pep.js中的動態拖拽約束

回答

相關問題