jQuery drag left/right

Question

I've just created a custom carousel with images and have got previous/next arrows to move the images around.

Does jQuery have an event where I can click on the photo, drag it to the left or right and fire the same action that I currently have on the arrows?

My current code looks like this

$carousel.animate({
    left: '+=' + amountToAnimate
}, 800, 'backEaseOut');

I also need to prevent Firefox from 'picking' the image up.

I'm already using jQuery UI if that helps.

in jQueryUI, draggable() has events that you can capture; I would start there. — orolo, Mar 03 '11 at 22:15
@orolo, I know but that 'drags' the element which is what I `don't` want. — Marko, Mar 03 '11 at 22:17

macarthy · Accepted Answer · 2011-03-03T22:30:06.917

You will need to add draggable() to your item and add some custom code the start event. With more sample code it might be easier to give fuller advice, jsfiddle.net sample is best

EDIT:

You could use events api http://api.jquery.com/category/events/ , mousemove and mousedown, to figure which way to move the image, and call the animate event.

Re-using draggable , with some clever options and event functions may be better

I also need to prevent Firefox from 'picking' the image up.

Use the Mozilla CSS Extensions

-moz-user-focus:ignore; 
-moz-user-select:none;

might to do the trick.

score 0 · Answer 2 · answered Mar 03 '11 at 22:27

This may not be the most elegant solution but I believe it should do the job

// shortcut var j = jQuery;

// add mouse down listener to the image j('#image_id').mousedown(function(){

// add mouse move
j('#image_id').mouseMove(function(event){

      // declare vars
      var previous_x_position;
      var previous_y_position;

      if(x_position)
      {
         previous_x_position = x_position;
         previous_y_position = y_position;
      }

      var x_position = event.pageX;
      var y_position = event.pageY;

      if(previous_x_position < x_position)
      {
          // we are moving right
      }
      else
      {
          // we are moving left
      }
      if(previous_y_position < y_position)
      {
          // we are moving down
      }
      else
      {
          // we are moving up
      }


})

})

jQuery drag left/right

2 Answers2