Rilevamento del supporto Drag & Drop HTML5 in javascript

Question

Sto provando a rilevare il supporto Drag & Drop HTML5 in JavaScript. Modernizr sembra non gestire questo caso.

Answer 1

Si può fare questo:

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

You can see a quick demo test using the above check here.

Inoltre, there's a nice feature detection (not browser detection, yay!) list that's fairly well maintained here nel caso si stia cercando anche altre funzionalità HTML5.

Answer 2

Rilevamento "trascinabili' in document.createElement ('arco') sembra una buona idea, ma in pratica non funziona.

iOS sostiene che trascinabile è nell'elemento ma non consente il drag and drop (Riferimento: Safari Web Content Guide: Handling Events)..

IE9 sostiene che draggable nON è nell'elemento, ma non permette il drag and drop (Riferimento: la mia resistenza test HTML5 e calo di IE.)

Modernizr è una migliore scelta perché non confonde IE. Tuttavia, afferma che il drag-and-drop HTML5 è disponibile su iOS.

Ecco come rilevo HTML5 drag and drop:

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

Verificare se "dragstart" e "goccia" sono supportati, utilizzando il metodo del "isEventSupported" in Modernizr. Vedi How to detect browser support File API drag n drop.

Answer 4

Questo è come è implementato in Modernizr

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