简述HTML5拖放
拖放是HTML5标准的一部分,任何元素都能够拖放,也能够将本地的文件拖放到页面上。
设置元素可拖放
为了使元素可拖动,把 draggable 属性设置为 true
<img draggable="true" />
拖放事件
有7个拖放事件可以捕获,如下:
dragstart:开始拖元素触发
dragenter:元素拖进可drop元素(绑定drop事件的元素)时触发
dragover:当元素拖动到drop元素上时触发
drop:当元素放下到drop元素触发
dragleave :当元素离开drop元素时触发
drag:每次元素被拖动时会触发
dragend:放开拖动元素时触发
完成一次拖放的事件过程是: dragstart –> dragenter –> dragover –> drop –> dragend
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
h5拖拽在兼容火狐与IE的实现需要注意的事
- Firefox拖拽必须携带数据,也就是说必须出现这个:
ev.dataTransfer.setData("infoName"," ");
- IE中出现
setData
这个会报错,不知道啥原因~,兼容的写法:
//拖拽开始
var evId;
function drag(ev){
// console.log("dataTransfer");
if(Browser.name == "FF"){
console.log(ev.dataTransfer.setData("imgInfo", ev.target.id)); // 火狐拖拽必须携带数据 IE偏偏不支持这个
}
evId = ev.target.id; // IE不支持,但可以这样
}
//拖拽结束
function drop(ev){
var info = evId;
// do something
}
附上获取浏览器信息的方法:
//判断当前浏览类型
function BrowserType()
{
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
if (isIE)
{
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
return {name:"IE",num: fIEVersion};
}//isIE end
if (isFF) { return {name:"FF",num: "FF"};}
if (isOpera) { return {name:"Opera",num: "Opera"};}
if (isSafari) { return {name:"Safari",num: "Safari"};}
if (isChrome) { return {name:"Chrome",num: "Chrome"};}
if (isEdge) { return {name:"Edge",num: "Edge"};}
}
Browser = BrowserType();
然后就有效果了
火狐下:
IE下:
拖拽的过程是有这个跟着鼠标的。。只是没录制到