H 5 API-元素ドラッグ

要素ドラッグhtml 5の新しいプロパティdraggable=「true」を使用するには、実際にはこのプロパティのデフォルトがtrueですが、互換性がないため、手動で追加することをお勧めします.

    
    


    

        

    
    
  
    


    var box = document.querySelector(".box");
    var target = document.querySelector(".box2");
    box.ondragstart = function(){
        console.log(1,"  ");
    }
    box.ondrag = function(){
        console.log(2,"   ");
    }
    box.ondragend = function(){
        console.log(3,"    ");
    }
    target.ondragenter = function(){
        console.log(4,"      ");
    }
    target.ondragleave = function(){
        console.log(5,"      ");
    }
    target.ondragover = function(){
        console.log(6,"        ");
    }
    target.ondrop = function(){
        console.log(7,"        ");
                target.appendChild(box);
    }

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值相同，否则无法放置拖拽元素。

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