Включить перетаскивание в UIWebView/WKWebView

Ответ 1

Trello на веб-сайте рабочего стола позволяет перетаскивать элементы вокруг.

Однако при использовании Safari в iOS это не работает.

Причина, по которой он не работает в iOS Safari, заключается в том, что он считает события мыши (на рабочем столе) отличными от событий касания (на iOS)

Если я представляю это в UIWebView или WKWebView, могу ли я сделать действие WebView более похожим на рабочий стол Safari, чтобы я мог перетаскивать элементы вокруг?

.. Мне просто интересно, возможно ли это с помощью WebView

Да, это возможно в WebView. Вы можете использовать JQuery UI для перетаскивания с помощью дополнительной библиотеки, которая переводит события мыши в касание, что вам нужно. Посмотрите jquery-ui-touch-punch. При этом перетаскивание из JQuery UI будет работать на iOS или на любом устройстве. Вы можете использовать что-то вроде:

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

чтобы преобразовать события мыши в контакт, и это работает как магия. Посмотрите этот учебник по jQuery UI Touch Punch с пользовательским интерфейсом jQuery. Здесь классная статья с демо на том же самом.

вежливость кода

Ответ 2

Ну, это возможно с помощью WebView. Фактический ответ: как? Как, чтобы получить отличный результат UX. Мобильное устройство не является настольным, фактическое решение - это вопрос UX, посвященный мобильному:

Вы можете использовать longtap, чтобы сделать карту "летающей/готовой для перетаскивания" (поворот прокрутки). Или используйте кнопку/плоскую кнопку на карточке, которую пользователи перетаскивают, чтобы перетащить ее. Мысли. Вы должны абсолютно избегать прокрутки и перетаскивания "включено" одновременно. Это перетащить ИЛИ прокрутить, никогда не перетаскивать и прокручивать.

ИЗМЕНИТЬ Вы можете использовать:

• JQuery UI для управления перетаскиванием @https://jqueryui.com/draggable/

• События JQuery Mobile vmouse. (хорошо работает с mousemove, лучшим). @https://api.jquerymobile.com/category/events/

Ответ 3

Если вам просто интересно, есть ли простой способ включить drag & drop кросс-платформу даже на мобильных устройствах, я могу предложить вам использовать Interact. js, хорошая библиотека взаимодействия с пользовательским интерфейсом, которую я успешно использовал в нескольких проектах.

Используя небольшой код, вы можете добиться рабочего перетаскивания, например:

var position = { x: 0, y: 0 };
interact('.element')
  .draggable({
    onmove: function(e) {
      var target = e.target;

      // calculate position
      position.x += e.dx;
      position.y += e.dy;

      // translate the element
      target.style.webkitTransform = 'translate(' + position.x + 'px, ' + position.y + 'px)';  
    }    
  });

Этот рабочий пример можно найти здесь: http://codepen.io/leonardfactory/pen/MwPBjZ

Я тестировал его на мобильном сафари, и он работает просто отлично, позволяя drag & drop. Вы можете найти дополнительную документацию на странице своего документа.

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

Ответ 4

Я не уверен, что это то, что вам нужно, но посмотрите на это jquery-ui-touch-punch.

Он обрабатывает прикосновения (touchstart, touchmove, touchhend) для правильной работы.

Взгляните на демонстрацию, где вы можете попробовать ее на своем мобильном устройстве демонстрационную страницу touchpunch.