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
      }


})

}）