bachir
/
jeunes-et-engages-d7


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jquery.pep demo - sortable w/ double click/tap </title>

    <!-- Load local jQuery.  -->
    <script src="../libs/jquery/jquery.js"></script>
    <script src="../libs/modernizr.min.js"></script>

    <!-- Load local lib and tests. -->
    <script src="../src/jquery.pep.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){

        // Grab our elements
        var $ul = $('ul');
        var $li = $ul.children('li');

        // Pep 'em
        $('li').pep({
          place:            false,
          axis:             'y',
          shouldEase:       false,
          stop: function(ev, obj){

            // Grab the list items and sort them based on 
            // distance from the top
            $li.sort(function(a,b) {   return ( $(a).position().top - $(b).position().top )    });
            $ul.append($li);

            // Remove CSS transformations so the list item 
            // fits nicely into place.
            var matrix = obj.matrixToArray( obj.matrixString() );
            var x = -1*matrix[4] 
            var y = -1*matrix[5] 
            obj.moveToUsingTransforms( x,y );
            obj.$el.css({ position: 'relative' })
                   .removeClass('activated');

            obj.toggle(false)
          }
        });

        // ..... then turn all peps off
        $.pep.toggleAll();

        // Double Tap Logic
        var startEvent      = Modernizr.touch ? 'touchstart' :  'mousedown';
        var stopEvent       = Modernizr.touch ? 'touchend'   :  'mouseup';
        var time            = false;
        var doubleTapDelay  = 300;

        $li.on( startEvent , function(e){
          var $this = $(this);

          if ( time && (new Date().getTime() - time) < doubleTapDelay ) {
            $this.addClass('activated')
                 .data('plugin_pep')
                 .toggle(true);
          }
          time = new Date().getTime();
        });
      });

    </script>

    <style type="text/css">
      body {
        font-family: Helvetica;
        text-align: center;
        margin: 0; 
        padding: 0;
      }

      body h1{
        color: white;
        background: black;
        margin: 0; padding: 10px 0;
      }

      body ul {
        margin: 0;
        padding: 0;
      }
      body ul li {
        background: #eee;
        list-style-type: none;
        padding: 40px 0;
        border-bottom: 1px solid #bbb;
        cursor: move;
        width: 100%;
      }

      body ul li.pep-start{
        box-shadow: 0 5px 5px rgba(0,0,0,0.2), 0 -5px 5px rgba(0,0,0,0.2);
        z-index: 999999;
      }

      body ul li.activated{
        background: white;
      }
    </style>

  </head>

  <body>

        <h1>Double tap/click to sort</h1>

        <ul>
          <li>
            0. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            9. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            10. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            11. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            12. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            13. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            14. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>
            15. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
        </ul>

  </body>


</html>