H5新增API-元素拖拽

元素拖拽要使用html5的新增属性draggable="true"，实际上这个属性默认就是true，但是以防不兼容，所以建议手动添加此属性。

console.log(7,"在目标元素上放手");在默认情况下是不会显示的，因为：浏览器默认禁止在元素上drop，禁止将其他元素拖拽到目标元素上放手。
需要在dragover时阻止浏览器的默认事件，才能触发ondrop。
在函数ondragstart中可以使用e来接收全局的事件，e.dataTransfer.setData可以设置数据，既可以设置一个字符串，也可以使用目标对象的属性。
box.ondragstart = function(e){
console.log(1,"开始");
console.log(e.dataTransfer);
// e.dataTransfer.setData("text","Hello");
e.dataTransfer.setData("text",e.target.id);
}

dataTransfer 贯穿整个拖拽生命周期的承载对象
dataTranser.setData(format,content)

• format: 数据格式，支持text URL 或其它MIME类型
• content: 要传递的内容

e.dataTransfer.effectAllowed设置拖拽元素的鼠标效果

• 常见的有：copy link move all copyLink ...
  当指定为none时，ondropystart里设置

e.dataTransfer.dropEffect设置目标元素的鼠标效果
如果和effectAllowed同时指定，则必须与effectAllowed值相同，否则无法放置拖拽元素。

阻止浏览器默认的下载或打开文件，直接读取图片并显示：

    



    
拖拽文件到此处