jquery - Javascript carousel drag event -


i'm doing sort of carousel , need work on touch devices well... works fine i'm trying implement mouse drag event i'm having few problems...

the html similar this:

<div class="mover">     <ul class="wrapper">         <li>             <div class="t">                 <div class="tc">                     <p>1</p>                 </div>             </div>         </li>         <li>             <div class="t">                 <div class="tc">                     <p>2</p>                 </div>             </div>         </li>         <li>             <div class="t">                 <div class="tc">                     <p>3</p>                 </div>             </div>         </li>     </ul> </div> 

it has various controls omitted because doesn't need scope.

the js functionalities i'm trying implement @ moment this:

var startdragposition = false; var $mover = $('.mover'); var $wrapper = $('.wrapper');  function startdrag( event ) {     event.preventdefault();      if ( $wrapper.triggerhandler( 'isscrolling' ) ) {         startdragposition = false;         return;     }     startdragposition = event.pagex;     $mover.bind(         'mousemove',         function( e ) {             $mover.css({                 'marginleft': -(300 + startdragposition - e.pagex)             });         }     ); } function stopdrag( event ) {     event.preventdefault();     $mover.unbind('mousemove');      if ( startdragposition ) {         var currentdragposition = event.pagex;         var direction = false;         if ( startdragposition < currentdragposition ) {             direction = 'prev';         } else if ( startdragposition > currentdragposition ) {             direction = 'next';         }         if ( direction ) {             $wrapper.trigger( direction );             $mover.animate({                 'left': ((direction == 'next') ? '-=' : '+=') + 300             }, 'slow');         }     }     startdragposition = false; }  $mover.bind('mousedown', startdrag) $mover.bind('mouseup', stopdrag) $mover.bind('mouseleave', stopdrag); 

the movement other controls based on left position of .mover element. i'm trying is:

  • when start dragging see item move.
  • when stop dragging see item move next or prev stage if exist.

i'm trying , trying cannot understand how let work properly... think close solution...

jsfiddle here: http://jsfiddle.net/ttt93/


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -