Динамическое сопротивление dragon в jquery.pep.js

Вопрос о constrainTo вариант в плагине jquery.pep.js.Динамическое сопротивление dragon в jquery.pep.js

tl, dr: Как динамически назначать constrainTo произвольным элементом jQuery?

Пример: В приведенном ниже коде у меня есть вложенные div's: pep-grandparent> pep-parent> pep. В инициализации $('.pep').pep() я хотел бы назначить constrainTo элементу «grandparent» pep класса pep-grandparent. Поскольку размер бабушки и дедушки может измениться, я хочу динамическое назначение constrainTo.

Опция documented для constrainTo является «родительским» или массив [вверху, справа, внизу, влево]. Наивно я провел in situ расчет для массива. Однако я замечаю, что это назначение применяется только при инициализации .pep(). Если я изменил размер браузера (обратите внимание на спецификацию% width в css - искусстве для динамического поведения), pep остается привязанным к его старому constrainTo. Однако, если constrainTo оказался «родительским» (т. Е. Родительским элементом pep), ограничение действительно динамично.

Я попытался прочитать source, но я не являюсь ниндзями Javascript, поэтому там не было беспорядка.

Вопрос 1: Можно ли присвоить другому элементу jQuery значение constrainTo?

Вопрос 2: Можно ли назначить constrainTo в (скажем) перетащить initiate? Если да, то как мне это сделать?

Вопрос 3: Мнение приглашен на этот хак решение: установить constrainTo в false и обрабатывать логику ограничения в сопротивление initiate/start/move/stop. Я пробовал это, это работает, но почему-то я чувствую, что родной constrainTo более плавный.

Примечание: Я свободно перемешал классы html и id в коде - sloppy, но нормально для этого примера.

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

я должен был быть в состоянии изменить кон dynamicTo динамически. Вот как я это сделал:

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

Невозможно получить доступ к ограничениям после вызова плагина. Но вы можете получить доступ к объекту pep через данные элемента и изменить его так, и он работает. Вам просто нужно обновлять свойство constrainTo каждый раз, когда ваши ограничения меняются.

источник

2014-08-27 15:57:28

Динамическое сопротивление dragon в jquery.pep.js

ответ

Смежные вопросы