briangonzalez / jquery.pep.js

👟 Pep, a lightweight plugin for kinetic drag on mobile/desktop
http://pep.briangonzalez.org
1.3k stars 178 forks source link

Add elements dynamically #194

Open nalancer08 opened 7 years ago

nalancer08 commented 7 years ago

Hi, i had probed your plugin, and it's very cool, but i adding elements in DOM dinamically, and in this point i bind the element with prep, and it works very well, but when i drag a element only takes the functions of last element inserted, in this case the "drag function", here my code:

`$('.tab_bar').on('click', function(e){

        e.preventDefault();

        var el = $(this);

        // el.addClass('hide');
        $('.screen .tab_screen').append('<div class="item tab_item item_' + cont +'"></div>');

        // Create the logic object
        var tab = obj.generateNewElement('tabBar');
        var la = '.item_' + cont;
        obj.screenComponents.tabBar = tab;
        cont = cont + 1;

        $(la).pep({

            droppable: '.tab_screen',
            constrainTo: '.screen',
            drag: function(ev, obj) {
                // console.log(obj);
                var item = $('.tab_item');
                var inspector = $('.inspector');

                //console.log($('.tab_item').position());
                var lala = '.opts';
                $(lala).remove();

                inspector.append('<div class="opts"> <p>Width: ' + item.width() + 
                    '</p> <br> <p>Height: ' + item.height() +
                    '</p> <br> <p>X: ' + item.position().left + 
                    '</p> <br> <p>Y: ' + item.position().top + '</p> </div>'
                );
            }
        });
    });`