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
Post a Comment