briangonzalez/jquery.pep.js

Stack elements in order of last clicked

Opened this issue · 1 comments

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)"
    });
}

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/