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

У меня есть UI jQuery 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('')
    .addClass('instance')
    .bind('click', function(event){
        return false;
    });
    $(this).append(e);
});

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

$('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:

 
    
Whatever dude
Appointment 11:45am
What do you think of a board where you can add writing as much as possible?
This was submitted
Hello world from iPad.

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

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

Больше замечаний общего порядка о том, как записать компоненты UI как это, приветствовалось бы также.

Спасибо!


ОБНОВЛЕНИЕ: Я смог, просто объединяют это в цепочку на мой UI jQuery draggable() назовите и получите корректный draggability на iPad!

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

Сенсорный плагин jQuery добился цели!

109
задан artlung 16 June 2010 в 00:30
поделиться

1 ответ

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


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

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

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

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

60
ответ дан 24 November 2019 в 03:21
поделиться
Другие вопросы по тегам:

Похожие вопросы: