Я ищу плагин drag and DROP, который работает на сенсорных устройствах.
Я бы хотел, чтобы аналогичная функциональность была jQuery UI plugin, которая позволяет "droppable" элементы.
плагин jqtouch поддерживает перетаскивание, но не отбрасывает.
Здесь есть перетаскивание, которое поддерживает только iPhone/iPad.
Может ли кто-нибудь указать мне в сторону плагина перетаскивания, который работает на android/ios?
... Или может быть возможно обновить плагин jqtouch для droppability, он уже работает на Andriod и IOS.
Спасибо!
Вы можете использовать JQuery UI для перетаскивания с помощью дополнительной библиотеки, которая переводит события мыши в нужное место, что вам нужно, библиотека, которую я рекомендую, https://github.com/furf/jquery-ui-touch-punch, при этом ваше перетаскивание из JQuery UI должно работать на сенсорных устройствах
или вы можете использовать этот код, который я использую, он также преобразует события мыши в контакт и работает как магия.
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
И в вашем документе. Теперь просто вызовите функцию init()
найденный код здесь
Для тех, кто хочет использовать это и поддерживать функциональность 'click' (как упоминает Джон Ландер в своем комментарии), вы можете сделать это всего за пару модификаций:
Добавьте пару глобалов:
var clickms = 100;
var lastTouchDown = -1;
Затем измените оператор switch из оригинала на это:
var d = new Date();
switch(event.type)
{
case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
case "touchmove": type="mousemove"; lastTouchDown = -1; break;
case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
default: return;
}
Вы можете настроить "клики" на свой вкус. В основном это просто наблюдение за "touchstart", за которым быстро последовал "touchhend", чтобы имитировать щелчок.
Спасибо за вышеуказанные коды! - Я попробовал несколько вариантов, и это был билет. У меня были проблемы в том, что preventDefault предотвращал прокрутку на ipad - теперь я тестирую перетаскиваемые элементы, и он отлично работает до сих пор.
if (event.target.id == 'draggable_item' ) {
event.preventDefault();
}
У меня было такое же решение, как gregpress answer, но мои перетаскиваемые элементы использовали класс вместо id. Кажется, что это работает.
var $target = $(event.target);
if( $target.hasClass('draggable') ) {
event.preventDefault();
}
Старый поток, который я знаю.......
Проблема с ответом @ryuutatsuo заключается в том, что он блокирует также любой вход или другой элемент, который должен реагировать на "клики" (например, входы), поэтому я написал это решение. Это решение позволило использовать любую существующую библиотеку перетаскивания, которая основана на событиях mousedown, mousemove и mouseup на любом сенсорном устройстве (или в кумпане). Это также кросс-браузерное решение.
Я тестировал несколько устройств и работает быстро (в сочетании с функцией перетаскивания ThreeDubMedia (см. также http://threedubmedia.com/code/event/drag)). Это решение jQuery, поэтому вы можете использовать его только с jQuery libs. Я использовал jQuery 1.5.1, потому что некоторые более новые функции не работают должным образом с IE9 и выше (не протестированы с более новыми версиями jQuery).
До вы добавили в событие операцию перетаскивания , чтобы вы сначала вызывали эту функцию:
simulateTouchEvents(<object>);
Вы также можете заблокировать все компоненты/дочерние элементы для ввода или ускорить обработку событий, используя следующий синтаксис:
simulateTouchEvents(<object>, true); // ignore events on childs
Вот код, который я написал. Я использовал несколько хороших трюков, чтобы ускорить оценку вещей (см. Код).
function simulateTouchEvents(oo,bIgnoreChilds)
{
if( !$(oo)[0] )
{ return false; }
if( !window.__touchTypes )
{
window.__touchTypes = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
}
$(oo).bind('touchstart touchmove touchend', function(ev)
{
var bSame = (ev.target == this);
if( bIgnoreChilds && !bSame )
{ return; }
var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
e = ev.originalEvent;
if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type] )
{ return; } //allow multi-touch gestures to work
var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;
if( b || window.__touchInputs[ev.target.tagName] )
{ return; } //allow default clicks to work (and on inputs)
// https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(newEvent);
e.preventDefault();
ev.stopImmediatePropagation();
ev.stopPropagation();
ev.preventDefault();
});
return true;
};
Что он делает: Сначала он переводит события с одним касанием в события мыши. Он проверяет, вызвано ли событие элементом элемента/в элементе, который нужно перетащить. Если это элемент ввода, например input, textarea и т.д., Он пропускает перевод, или если к нему прикреплено стандартное событие мыши, оно также пропустит перевод.
Результат: Каждый элемент перетаскиваемого элемента все еще работает.
Счастливое кодирование, greetz, Эрвин Хаантес
simulateTouchEvents(<object>, true);
???