Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>you need to check the X or Y position in the "pan" event and return false if it is less than the X or Y position on "down" like this </p> <pre><code>$('#your_reel_image').on('down', function(e, x, y, ev){ $(this).data("lastPosition",{"x":x,"y":y});//store the position on mousedown }).on('pan', function(e,x,y,ev){//event when you do a mousemove while the mousedown var $reel=$(this); var delta=$reel.data("lastPosition").x-x;//difference between current and last position if(delta&lt;0){ $reel.data("lastPosition",{"x":x,"y":y});//update position $reel.data("direction","right");//set current direction to right } else if(delta&gt;0){ $reel.data("direction","left");//set current direction to left return false;//prevent the reverse animation } }); </code></pre> <p>i also add a function in fractionChange to prevent the 1 frame reverse animation that will happen if you only move the cursor to the left </p> <pre><code>$('#your_reel_image').on('fractionChange',function(){ if($(this).data("direction")=="left"){//if the current direction is left $(this).data("direction","")//clear the current direction return false;//return false prevent the 1 frame animation //without the last line you can return 1 frame at a time on mouseup } }); </code></pre> <p>if you want to prevent the reverse animation on mousewheel you need to add this function </p> <pre><code>$('#your_reel_image').on('wheel',function(e, distance, ev){ var $reel=$(this); //almost the same as in the pan function without storing the position if(distance&lt;0){ $reel.data("direction","right"); } else if(distance&gt;0){ $reel.data("direction","left"); return false; } }); </code></pre> <p><a href="http://jsfiddle.net/N68qa/1/" rel="nofollow">http://jsfiddle.net/N68qa/1/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload