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

Stack elements in order of last clicked #186

Open modulareverything opened 8 years ago

modulareverything commented 8 years ago

I'm looking to stack some elements based on when they were last clicked. So basically, whatever was last dragged will sit at the top. When another element is clicked, that will then sit on top of the last, and so on.

Here's what I have so far:

jQuery(function($) {
    $('.menu').pep({
        place : false,
        deferPlacement : true,
        constrainTo : 'window',
        activeClass : 'pep--active',
        drag : function() {
            $('.menu').removeClass('pep--last-active');
        },
        stop : function() {
            $(this.el).addClass('pep--last-active')
        }
    });
});

function rotate($obj, deg){
    $obj.css({
      "-webkit-transform": "rotate("+ deg +"deg)",
         "-moz-transform": "rotate("+ deg +"deg)",
          "-ms-transform": "rotate("+ deg +"deg)",
           "-o-transform": "rotate("+ deg +"deg)",
              "transform": "rotate("+ deg +"deg)"
    });
}
seanCodes commented 7 years ago

You can accomplish this by shuffling the elements’ source order on drag start: https://jsfiddle.net/zn7pme0y/ Or you could do it using z-index, but it’s a bit more code: https://jsfiddle.net/zn7pme0y/1/