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来确定移动图像的方式，并调用animate事件。

重新使用draggable，有一些聪明的选项和事件功能可能会更好

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

使用Mozilla CSS Extensions

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

可能会做的伎俩。

Answer 2

这可能不是最优雅的解决方案，但我相信它应该完成这项工作

//快捷方式 var j = jQuery;

//将鼠标向下添加到图像中 Ĵ（ '＃image_id'）。鼠标按下（函数（）{

// 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向左/向右拖动

2 个答案: