Javascript Drag and drop для сенсорных устройств [закрыто]

Я ищу плагин drag & DROP, который работает на сенсорных устройствах.

Я бы хотел, чтобы функциональность была аналогична плагину jQuery UI, который позволяет «отбрасывать» элементы.

Jqtouch плагин поддерживает перетаскивание, но не падая.

Вот перетаскивание, которое поддерживает только iPhone / iPad.

Может ли кто-нибудь указать мне на плагин перетаскивания, который работает на android / ios?

... Или можно обновить плагин jqtouch для возможности сбрасывания, он уже работает на Andriod и IOS.

Спасибо!

Вы можете использовать пользовательский интерфейс Jquery для перетаскивания с дополнительной библиотекой, которая переводит события мыши в касание, что вам нужно, библиотека, которую я рекомендую, - https://github.com/furf/jquery-ui-touch-punch , с это ваше перетаскивание из пользовательского интерфейса JQuery должно работать на сенсорных устройствах

или вы можете использовать этот код, который я использую, он также преобразует события мыши в сенсорные и работает как по волшебству.

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);
}

И в вашем document.ready просто вызовите функцию init ()

код найден здесь

Для тех, кто хочет использовать это и сохранить функциональность щелчка (как упоминает Джон Ландхир в своем комментарии), вы можете сделать это всего с парой модификаций:

Добавьте пару глобалов:

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;
}

Вы можете настроить "клики" по своему вкусу. По сути, это просто наблюдение за «сенсорным запуском», за которым быстро следует «касание» для имитации щелчка.

Спасибо за приведенные выше коды! - Я попробовал несколько вариантов, и это был билет. У меня были проблемы с тем, что preventDefault предотвращал прокрутку на ipad - сейчас я тестирую перетаскиваемые элементы, и пока он отлично работает.

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

У меня было то же решение, что и у gregpress answer , но мои перетаскиваемые элементы использовали класс вместо идентификатора. Вроде работает.

var $target = $(event.target);  
if( $target.hasClass('draggable') ) {  
    event.preventDefault();  
}

Старый нить знаю .......

Проблема с ответом @ryuutatsuo заключается в том, что он также блокирует любой ввод или другой элемент, который должен реагировать на «щелчки» (например, вводы), поэтому я написал это решение. Это решение позволило использовать любую существующую библиотеку перетаскивания, основанную на событиях mousedown, mousemove и mouseup на любом сенсорном устройстве (или компьютере). Это тоже кроссбраузерное решение.

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

Результат: все элементы перетаскиваемого элемента по-прежнему работают.

Удачного кодирования, приветц, Эрвин Хантьес