jQuery перетащите влево / вправо

Question

Я только что создал собственную карусель с изображениями и получил стрелки «предыдущий / следующий» для перемещения изображений.

Есть ли в jQuery событие, когда я могу нажать на фотографию и перетащить ее влево?или вправо и запустить то же действие, которое я сейчас выполняю со стрелками?

Мой текущий код выглядит следующим образом

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

Мне также нужно предотвратитьFirefox «забирает» изображение вверх.

Я уже использую пользовательский интерфейс jQuery, если это поможет.

Answer 1

Вам нужно будет добавить draggable () к вашему элементу и добавить собственный код для запуска события. Чем больше примеров кода, тем проще дать более полный совет, пример jsfiddle.net лучше всего

EDIT:

Вы можете использовать события api http://api.jquery.com/category/events/, mousemove и mousedown, чтобы выяснить, в какую сторону перемещать изображение, и вызвать событие animate.

Повторное использование Dragable, с некоторыми умными опциями и функциями событий может быть лучше

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 (функция () {

// 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
      }


})

})