Drag & drop на ipad, iphone, android

Как реализовать drug & drop эффект на устройствах с touch-интерфейсом, таких как ipad, iphone, android-os?

Все просто.

Необходимо скачать отсюда виджет для jQuery UI touch,  который делает возможным использование draggable на touch-устройствах.

Для того чтобы это сделать, необходимо проделать следующие действия:

  1. Скачать touch-punch
  2. Подключить jQuery
    1
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  3. Подключить jQuery UI
    1
    
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
  4. Подключить jQuery UI touch punch
    1
    
    <script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
  5. Повесить draggable на необходимый элемент
    1
    
    <script>$('#widget').draggable();</script>
  6. Насладиться 🙂
Drag & drop на ipad, iphone, android
Drag & drop на ipad, iphone, android

Random Posts

  • qip 2010 — online статус для Web

    Очень часто бывает, что люди размещает на сайте цветочек icq, который отображает их текущий статус. Цветочек должен быть красный или […]

  • Netbeans: переключение между парными фигурными скобками

    Как переключаться между парными фигурными скобками в PHP IDE Netbeans? На самом деле это очень просто. В свое время, я […]

  • CMS на базе Yii Framework

    Хотелось бы написать обзор на эту тему, но писать не про что, так как CMS на Yii можно пересчитать по […]

  • Установка Synaptic в Ubuntu 11.10+

    Как известно, в 11.10 Довольно удобный менеджер пакетов Synaptic был удален из стандартного набора приложений и утилит. К лучшему это […]

2 thoughts on “Drag & drop на ipad, iphone, android

  1. а как быть со слайдером с ползунком для выбора диапазона?
    там куда вешать draggable?
    Пробую на div вокруг слайдера — так двигается весь слайдер
    а надо ведь только ползунки

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*
*