Как я могу сделать jQuery UI 'draggable ()' div перетаскиваемым для сенсорного экрана?

109

У меня есть jQuery UI draggable(), который работает в Firefox и Chrome. Концепция пользовательского интерфейса в основном позволяет создать элемент типа "пост-он".

В основном, я нажимаю или нажимаю div#everything (100% высокий и широкий), который прослушивает клики, и отображается текстовое поле ввода. Вы добавляете текст, а затем, когда вы закончите, он сохраняет его. Вы можете перетащить этот элемент. Это работает с обычными браузерами, но на iPad я могу проверить, я не могу перетаскивать элементы вокруг. Если я касаюсь, чтобы выбрать (он затем немного тускнеет), я не могу его перетащить. Он не будет тянуть влево или вправо. Я может перемещаться вверх или вниз, но я не перетаскиваю отдельный div, я перетаскиваю всю веб-страницу.

Итак, вот код, который я использую для захвата кликов:

$('#everything').bind('click', function(e){
    var elem = document.createElement('DIV');
    STATE.top = e.pageY;
    STATE.left = e.pageX;
    var e = $(elem).css({
        top: STATE.top,
        left: STATE.left
    }).html('<textarea></textarea>')
    .addClass('instance')
    .bind('click', function(event){
        return false;
    });
    $(this).append(e);
});

И вот код, который я использую, чтобы "сохранить" заметку и превратить входной div в только дисплей div:

$('textarea').live('mouseleave', function(){
    var val = jQuery.trim($(this).val());
    STATE.content = val;
    if (val == '') {
        $(this).parent().remove();
    } else {
        var div  = $(this).parent();
        div.text(val).css({
            height: '30px'
        });
        STATE.height = 30;
        if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) {
            while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) {
                var h = div.height() + 10;
                STATE.height = h;
                div.css({
                    height: (h) + 'px'
                });     // element just got scrollbars
            }
        }
        STATE.guid = uniqueID()
        div.addClass('savedNote').attr('id', STATE.guid).draggable({
            stop: function() {
                var offset = $(this).offset();
                STATE.guid = $(this).attr('id');
                STATE.top = offset.top;
                STATE.left = offset.left;
                STATE.content = $(this).text();
                STATE.height = $(this).height();
                STATE.save();
            }
        });
        STATE.save();
        $(this).remove();
    }
});

И у меня есть этот код, когда я загружаю страницу для сохраненных заметок:

$('.savedNote').draggable({
    stop: function() {
        STATE.guid = $(this).attr('id');
        var offset = $(this).offset();
        STATE.top = offset.top;
        STATE.left = offset.left;
        STATE.content = $(this).text();
        STATE.height = $(this).height();
        STATE.save();
    }
});

Мой объект STATE обрабатывает сохранение заметок.

Onload, это весь html-элемент:

<body> 
    <div id="everything"></div> 
<div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div> 
<div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div> 
<div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div> 
<div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div> 
<div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div> 

</body>

Итак, мой вопрос действительно: как я могу улучшить эту работу на iPad?

Я не настроен на пользовательский интерфейс jQuery, мне интересно, не ошибаюсь ли я в этом с помощью jQuery UI или jQuery, или могут быть лучшие рамки для выполнения кросс-платформенных/обратных совместимых draggable() элементы, которые будут работать для пользовательских интерфейсов сенсорного экрана.

Более общие комментарии о том, как писать компоненты интерфейса, такие как это, также приветствуются.

Спасибо!

UPDATE: Я смог просто связать это с моим вызовом jQuery UI draggable() и получить правильное перетаскивание на iPad!

.touch({
    animate: false,
    sticky: false,
    dragx: true,
    dragy: true,
    rotate: false,
    resort: true,
    scale: false
});

jQuery Touch плагин сделал трюк!

  • 1
    Мне интересно кое-что: можете ли вы перетащить div двумя или тремя пальцами? Я знаю, что иногда приходится использовать несколько пальцев для прокрутки встроенного контента в мобильном Safari, поэтому он может быть одинаковым для «перетаскиваемого» контента.
  • 0
    Вальтер Мундт спасибо! Я не пробовал никаких вариаций пальцев, попробую когда получу в руки!
Показать ещё 4 комментария
Теги:
ipad
draggable
touchscreen

7 ответов

129
Лучший ответ

Потеряв много часов, я наткнулся на это!

jquery-ui-touch-punch

Он переводит события события в виде кликов. Не забудьте загрузить script после jquery.

Я работал над iPad и iPhone

$('#movable').draggable({containment: "parent"});
Поделиться
  • 2
    Это решение прекрасно работает, другой ответ, который я устал, был глючит и действительно не помог
  • 1
    @ ctrl-alt-dileep спасибо, это помогает мне тоже
Показать ещё 6 комментариев
57

Внимание: Этот ответ был написан в 2010 году, и технология быстро продвигается. Более недавнее решение см. Ниже @ctrl-alt-dileep.

В зависимости от ваших потребностей вы можете попробовать jQuery touch plugin; вы можете попробовать пример здесь. Он отлично работает, чтобы перетащить мой iPhone, тогда как jQuery UI Draggable не работает.

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

Как побочное решение: верьте или нет, мы слышим все больше шума о том, как сенсорные устройства, такие как iPad и iPhone, вызывают проблемы как для веб-сайтов, использующих функции hover/onmouseover, так и для перетаскиваемого контента.

Если вы заинтересованы в базовом решении для этого, он должен использовать три новых события JavaScript; ontouchstart, ontouchmove и ontouchend. Apple фактически написала статью об их использовании, которую вы можете найти здесь здесь. Упрощенный пример можно найти здесь. Эти события используются в обоих плагинах, с которыми я связан.

Надеюсь, это поможет!

Поделиться
  • 2
    Супер классный! Все, что мне нужно было сделать, это .touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false }); на мой существующий вызов draggable() и это работает удовольствие! Мне все еще нужно отработать все события, с которыми я хочу иметь дело, чтобы правильно настроить рабочий процесс, но плагин jQuery touch справился с задачей!
  • 0
    Отличное первое использование системы вознаграждений. Спасибо! Я также буду искать другие способы сделать это. Надеемся, что ребята из jQueryUI могут интегрировать поддержку сенсорного экрана. Похоже, очевидное дополнение.
Показать ещё 8 комментариев
23

Этот проект должен быть полезен - отображает события касания, чтобы щелкнуть события таким образом, чтобы пользовательский интерфейс jQuery работал на iPad и iPhone без каких-либо изменений. Просто добавьте JS в любой существующий проект.

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

Поделиться
  • 0
    спасибо за подсказку, что плагин потрясающий
  • 0
    Спасибо вам большое!
Показать ещё 1 комментарий
7

jQuery ui 1.9 позаботится об этом для вас. Здесь представлена ​​демонстрация пре:

https://dl.dropbox.com/u/3872624/lab/touch/index.html

Просто возьмите jquery.mouse.ui.js, вставьте его под загружаемым файлом jQuery ui и все, что вам нужно сделать! Работает также для сортировки.

Этот код отлично работает для меня, но если вы получаете ошибки, обновленную версию jquery.mouse.ui.js можно найти здесь:

Jquery-ui sortable не работает на сенсорных устройствах на базе Android или IOS

Поделиться
  • 3
    Это здорово, они имеют дело с этим 1.9. Впрочем, я обнаружил, что версия кода в этой демонстрации содержит ошибки, и не очень хорошо работает. Кто-то разместил более правильную версию по этому вопросу: stackoverflow.com/questions/6745098/…, которая работает лучше для меня.
  • 0
    Я обновил свой ответ, чтобы решить эту проблему. Я не получил никаких ошибок в моем случае использования с оригиналом.
Показать ещё 1 комментарий
4

Этот проект на github может быть вашим решением

https://github.com/furf/jquery-ui-touch-punch

Поделиться
2

Вчера я боролся с подобной проблемой. У меня уже было "рабочее" решение с использованием jQuery UI, перетаскиваемого вместе с jQuery Touch Punch, о котором говорится в других ответах. Однако использование этого метода вызывало странные ошибки на некоторых устройствах Android для меня, поэтому я решил написать небольшой плагин jQuery, который может перетаскивать HTML-элементы с помощью событий касания вместо использования метода, который эмулирует поддельные события мыши.

Результатом этого является jQuery Draggable Touch, который является простым плагином jQuery для создания элементов, которые можно перетаскивать, сенсорных устройств в качестве основной цели, используя события касания (например, touchstart, touchmove, touchhend и т.д.). Он по-прежнему имеет резерв, который использует события мыши, если браузер/устройство не поддерживает события касания.

Поделиться
  • 0
    Привет Хейман, Это хорошая работа. Спасибо, что поделились этим. Будет ли это работать для jQuery изменяемого размера тоже?
1

Вы можете попробовать использовать jquery.pep.js:

jquery.pep.js - это легкий плагин jQuery, который превращает любой DOM элемент в перетаскиваемый объект. Он работает в основном во всех браузерах, от старого до нового, от касания до щелчка. Я построил его, чтобы удовлетворить потребность в который jQuery UIs draggable не выполнялся, так как он не работал на сенсорных устройствах (без хакерства).

Веб-сайт, Ссылка GitHub

Поделиться
  • 1
    Спасибо @martynas, я проверю это!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню