Как я могу сделать jQuery UI 'draggable ()' div draggable для сенсорного экрана?
у меня есть jQuery UI draggable() это работает в Firefox и Chrome. Концепция пользовательского интерфейса в основном нажмите, чтобы создать элемент типа "post-it".
в основном, я нажимаю или нажимаю на div#everything (100% высокий и широкий), который слушает щелчки, и отображается текстовое поле ввода. Вы добавляете текст, а затем, когда вы закончите, он сохраняет его. Вы можете перетащить этот элемент. Это работает в обычных браузерах, но на iPad я могу протестировать, я не могу перетаскивать элементы. Если я коснусь, чтобы выбрать (это затем немного тускнеет), я не могу его перетащить. Он не будет тянуть влево или вправо вообще. Я!--13-->можете перетащите вверх или вниз, но я не перетаскиваю человека 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 UI, мне интересно, если это то, что я делаю неправильно с jQuery UI или jQuery, или могут ли быть лучшие рамки для выполнения кросс-платформенных / обратно совместимых перетаскиваемых () элементов, которые будут работать для сенсорного экрана сию.
более общие комментарии о том, как писать компоненты пользовательского интерфейса, как это будет приветствоваться, а также.
спасибо!
обновление:
Я смог просто привязать это к моему jQuery UI draggable() звонок и сделать правильный draggability на iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
на jQuery сенсорный плагин сделал свое дело!
7 ответов
потратив много часов, я наткнулся на это!
он переводит коснитесь события, как события click. Не забудьте загрузить скрипт после jquery.
Я получил это работает на iPad и iPhone
$('#movable').draggable({containment: "parent"});
внимание: этот ответ был написан в 2010 году и технология быстро движется. Более недавнее решение см. В разделе @ctrl-alt-dileep ответ ниже.
в зависимости от ваших потребностей, вы можете попробовать jQuery сенсорный плагин; вы можете попробовать пример здесь. Он отлично работает, чтобы перетащить на мой iPhone, в то время как jQuery UI Draggable этого не делает.
кроме того, вы можете попробовать этой плагин, хотя это может требуется, чтобы вы фактически написали свою собственную функцию draggable.
Как sidenote: Верьте или нет, мы слышим растущий шум о том, как сенсорные устройства, такие как iPad и iPhone, вызывают проблемы как для веб-сайтов, использующих :функции наведения/onmouseover и перетаскиваемый контент.
Если вас интересует базовое решение для этого, это использовать три новых события JavaScript; ontouchstart, ontouchmove и ontouchend. Apple фактически написала статью о своих используйте, который вы можете найти здесь. Упрощенный пример можно найти здесь. Эти события используются в обоих плагинах, с которыми я связан.
надеюсь, что это помогает!
этот проект должен быть полезен-отображает события касания, чтобы щелкнуть события таким образом, чтобы jQuery UI мог работать на iPad и iPhone без каких-либо изменений. Просто добавьте JS в любой существующий проект.
jQuery ui 1.9 позаботится об этом для вас. Вот демо-версия pre:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
просто возьмите jquery.мышь.пользовательский интерфейс.js, вставьте его под файл пользовательского интерфейса jQuery, который вы загружаете, и это все, что вам нужно сделать! Работает и для сортировки.
этот код отлично работает для меня, но если вы получаете ошибки, обновленную версию jquery.мышь.пользовательский интерфейс.js можно найти здесь:
jQuery-ui sortable не работает на сенсорных устройствах на базе Android или IOS
вчера я боролся с подобной проблемой. У меня уже было "рабочее" решение, использующее перетаскиваемый jQuery UI вместе с jQuery Touch Punch, которые упоминаются в других ответах. Однако использование этого метода вызывало странные ошибки в некоторых устройствах Android для меня, и поэтому я решил написать небольшой плагин jQuery, который может сделать HTML-элементы перетаскиваемыми с помощью сенсорных событий вместо использования метода, который эмулирует поддельные события мыши.
в результате jQuery Draggable Touch который является простым плагином jQuery для создания перетаскиваемых элементов, который имеет сенсорные устройства в качестве основной цели с помощью сенсорных событий (например, touchstart, touchmove, touchend и т. д.). Он по-прежнему имеет резерв, который использует события мыши, если браузер/устройство не поддерживает события касания.
вы можете попробовать использовать С помощью jQuery.энергия.js:
С помощью jQuery.энергия.js это легкий плагин jQuery, который превращает любой DOM элемент в перетаскиваемый объект. Она работает в основном во всех браузерах, от старого к Новому, от касания к щелчку. Я построил его, чтобы служить нужде. который jQuery UI не выполнял, так как он не работал на сенсорных устройствах (без шаманства).