Старая тема, я знаю .......
У меня здесь есть решение, которое учитывает любой ввод или другой элемент, который должен реагировать на «щелчки» (например, вводы) на перетаскиваемом элементе. Это решение позволило использовать любую существующую библиотеку перетаскивания, основанную на событиях mousedown, mousemove и mouseup, на любом сенсорном устройстве (или cumputer). Это также кросс-браузерное решение.
Я провел тестирование на нескольких устройствах и работает быстро (в сочетании с функцией перетаскивания в ThreeDubMedia (см. Также http://threedubmedia.com/code/event/drag)).). Это решение jQuery, поэтому вы можете использовать его только с библиотеками jQuery. I для этого использовали 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 и т. Д., Он пропускает перевод, или если к нему прикреплено стандартное событие мыши, он также пропускает перевод.
Результат:
Каждый элемент перетаскиваемого элемента все еще работает.
Удачного кодирования, привет,
Эрвин Хаантес