[英]How to detect browser support File API drag n drop
我喜歡只為支持拖放文件的瀏覽器在 div 上添加背景
我不喜歡使用modernizr,只是一個單行腳本
為什么不直接從 Modernizr 復制所需的部分?
var isEventSupported = (function() {
var TAGNAMES = {
'select': 'input', 'change': 'input',
'submit': 'form', 'reset': 'form',
'error': 'img', 'load': 'img', 'abort': 'img'
};
function isEventSupported( eventName, element ) {
element = element || document.createElement(TAGNAMES[eventName] || 'div');
eventName = 'on' + eventName;
// When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
var isSupported = eventName in element;
if ( !isSupported ) {
// If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
if ( !element.setAttribute ) {
element = document.createElement('div');
}
if ( element.setAttribute && element.removeAttribute ) {
element.setAttribute(eventName, '');
isSupported = typeof element[eventName] == 'function';
// If property was created, "remove it" (by setting value to `undefined`)
if ( typeof element[eventName] != 'undefined' ) {
element[eventName] = undefined;
}
element.removeAttribute(eventName);
}
}
element = null;
return isSupported;
}
return isEventSupported;
})();
用法:
if (isEventSupported('dragstart') && isEventSupported('drop')) {
...
}
對於文件 API:
var isFileAPIEnabled = function() {
return !!window.FileReader;
};
您可以使用:
return 'draggable' in document.createElement('span') && typeof(window.FileReader);= 'undefined';
如果您根本不想處理 Modernizr,您可以復制它對拖放檢測的作用:
var supportsDragAndDrop = function() {
var div = document.createElement('div');
return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}
從 Modernizr GitHub 存儲庫獲得它:
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js
查看 HTML5 拖放檢測的modernizr源代碼技術https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js
除了這似乎錯誤地將 iOS 檢測為支持拖放
不知道為什么每個人都需要創建一個新元素來檢查這一點。 我認為只需檢查 body 元素是否支持拖動事件以及瀏覽器是否支持文件 API 就足夠了
supportsDragAndDrop(){
body = document.body
return ("draggable" in body || ("ondragstart" in body && "ondrop" in body))
&& window.FormData && window.FileReader
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.