javascript - libreria - js drag and drop cards

Detectando compatibilidad con arrastrar y soltar HTML5 en JavaScript

Question

Estoy intentando detectar el soporte de arrastrar y soltar HTML5 en JavaScript. Modernizr parece no manejar este caso de prueba.

Answer 1

Detectar "arrastrables" en document.createElement (''span'') parece una buena idea, pero en la práctica no funciona.

iOS afirma que se puede arrastrar en el elemento, pero no permite arrastrar y soltar. (Referencia: Guía de contenido web de Safari: manejo de eventos )

IE9 afirma que arrastrable NO está en el elemento, pero sí permite arrastrar y soltar. (Referencia: mi prueba HTML5 arrastra y suelta en IE).

Modernizr es una mejor opción porque no confunde IE. Sin embargo, indica que HTML5 arrastrar y soltar está disponible en iOS.

Así es como detecto arrastrar y soltar 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 2

Puedes hacerlo:

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

Puede ver una prueba demo rápida usando la verificación anterior aquí .

Además, hay una buena lista de detección de características (¡no la detección del navegador, yay!) Que está bastante bien mantenida aquí en caso de que también esté buscando otras características HTML5.

Answer 3

Así es como se implementa en Modernizr

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

Answer 4

Compruebe si se admiten "dragstart" y "drop", utilizando el método "isEventSupported" en Modernizr. Consulte Cómo detectar la compatibilidad del navegador File API drag n drop .