Обнаружение поддержки перетаскивания HTML5 в JavaScript

Question

Я пытаюсь обнаружить поддержку перетаскивания HTML5 в JavaScript. Модернизр, похоже, не справился с этим контрольным примером.

Answer 1

Вы можете сделать это:

if('draggable' in document.createElement('span')) {
  alert("Drag support detected");
}

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

Кроме того, есть хороший список обнаружения функций (не обнаружение в браузере, ура!), Который довольно хорошо поддерживается здесь на случай, если вы ищете и другие функции HTML5.

Answer 2

Обнаружение «перетаскиваемого» в document.createElement ('span') кажется хорошей идеей, но на практике это не работает.

iOS утверждает, что Draggable находится в элементе, но не позволяет перетаскивать. (Ссылка: Руководство по веб-контенту Safari: обработка событий )

IE9 утверждает, что draggable НЕ находится в элементе, но допускает перетаскивание. (Ссылка: мое тестирование HTML5 перетащить в IE.)

Modernizr - лучший выбор, потому что он не смущает IE. Тем не менее, он утверждает, что перетаскивание HTML5 доступно на iOS.

Вот как я могу обнаружить перетаскивание HTML5:

var iOS = !!navigator.userAgent.match('iPhone OS') || !!navigator.userAgent.match('iPad');
if (Modernizr.draganddrop && !iOS) {
    HTML5 drag and drop solution
} else if (Modernizr.draganddrop && iOS) {
    iOS drag and drop solution 
} else {
    non-HTML5 drag and drop solution
}

Answer 3

Вот как это реализовано в Modernizr

function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

Answer 4

Проверьте, поддерживаются ли «dragstart» и «drop», используя метод «isEventSupported» в Modernizr. См. Как определить поддержку браузера File API drag n drop .