У меня есть 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 добился цели!
Внимание: Этот ответ был написан в 2010 году, и технологии быстро развиваются. Более новое решение см. В ответе @ ctrl-alt-dileep ниже .
В зависимости от ваших потребностей вы можете попробовать плагин jQuery touch ; вы можете попробовать пример здесь . Он отлично работает, перетаскивая на мой iPhone, тогда как jQuery UI Draggable - нет.
Как вариант, вы можете попробовать этот плагин, хотя для этого может потребоваться написать собственную перетаскиваемую функцию.
В качестве примечания: вы не поверите, но мы слышим все возрастающее количество слухов о том, как сенсорные устройства, такие как iPad и iPhone, вызывают проблемы как для веб-сайтов, использующих функции: hover / onmouseover, так и перетаскиваемого контента.
Если вас интересует базовое решение для этого, используйте три новых события JavaScript; ontouchstart, ontouchmove и ontouchend. Apple действительно написала статью об их использовании, которую вы можете найти здесь . Упрощенный пример можно найти здесь . Эти события используются в обоих подключаемых модулях, с которыми я связан.