jQuery向左/向右拖动

Question

我刚刚用图像创建了一个自定义轮播，并使用了上一个/下一个箭头来移动图像。

jQuery是否有一个事件，我可以单击照片，将其向左或向右拖动，并执行与当前箭头相同的操作？

我当前的代码如下所示

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

我还需要防止Firefox“拾取”图像。

如果有帮助，我已经在使用jQuery UI。

Answer 1

您将需要将draggable（）添加到您的商品，并在开始事件中添加一些自定义代码。 有了更多示例代码，可能更容易给出更全面的建议，jsfiddle.net示例是最佳的

编辑：

您可以使用事件api http://api.jquery.com/category/events/，mousemove和mousedown来确定移动图像的方式，并调用动画事件。

重复使用Draggable，并提供一些巧妙的选项和事件功能可能会更好

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

使用Mozilla CSS扩展

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

可能会解决问题。

Answer 2

这可能不是最优雅的解决方案，但我认为它应该能胜任

//快捷方式var j = jQuery;

//将鼠标按下侦听器添加到图像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
      }


})

}）