<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Slip.js - простой список с сортировкой и удалением свайпами.

Slip.js - простой список с сортировкой и удалением свайпами.

Всем привет! Сегодня мы рассмотрим библиотеку, позволяющую сделать простой список, который мы можем сортировать и удалять элементы свайпами.

Посмотреть пример можно тут.

А исходники вы сможете найти здесь.

Использовать данную библиотеку несложно

var list = document.querySelector('ul#slippylist');
new Slip(list);

list.addEventListener('slip:beforeswipe', function(e) {
  if (shouldNotSwipe(e.target)) {
   e.preventDefault();
  }
});

list.addEventListener('slip:swipe', function(e) {
  if (thatWasSwipeToRemove) {
   e.target.parentNode.removeChild(e.target);
  } else {
   e.preventDefault();
  }
});

list.addEventListener('slip:beforereorder', function(e) {
  if (shouldNotReorder(e.target)) {
   e.preventDefault();
  }
});

list.addEventListener('slip:beforewait', function(e) {
  if (isScrollingKnob(e.target)) {
   e.preventDefault();
  }
});

list.addEventListener('slip:reorder', function(e) {
  if (reorderedOK) {
   e.target.parentNode.insertBefore(e.target, e.detail.insertBefore);
  } else {
   e.preventDefault();
  }
});

Итак, что же это за методы?

slip:swipe

Когда пользователь сделает свайп, элемент вернется на текующую позицию, если установлено event.preventDefault(). В противном случае элемент будет удален.

slip:beforeswipe

Срабатывает еще до первого свайпа. Если установлен event.preventDefault(), тогда элемент не будет двигаться вообще. Родительский элемент будет иметь класс slip-swiping-container для продолжительности анимации.

slip:reorder

Сработает, когда элемент будет помещен на новое местоположение.

slip:beforeorder

Срабатывает, когда происходят движения сортировки.

slip:beforewait

Если у вас стоит event.preventDefault(), то изменение порядка будет происходить сразу, блокируя способность пролистывать страницу.

slip:tap

Сработает, когда элемент был тапнут, но не свайпнут.

slip:cancelswipe

Срабатывает, когда пользователь отпускает элемент, и он возвращается в исходную позицию.

Итак, на этом все. Спасибо за внимание и удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.