元素拖拽要使用html5的新增屬性draggable="true"，實際上這個屬性默認(rèn)就是true，但是以防不兼容，所以建議手動添加此屬性。
<!DOCTYPE html>
<html>
<head>
<title>drag</title>
<style type="text/css">
.box1, .box2{
float: left;
width: 200px;
height: 150px;
box-shadow: 0 2px 2px #000;
margin:20px;
}
.box{
width: 50px;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box" draggable="true"></div>
</div>
<div class="box2">
</div>
</body>
<script type="text/javascript">
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,"拖拽結(jié)束");
}
target.ondragenter = function(){
console.log(4,"進(jìn)入目標(biāo)元素");
}
target.ondragleave = function(){
console.log(5,"離開目標(biāo)元素");
}
target.ondragover = function(){
console.log(6,"在目標(biāo)元素上移動");
}
target.ondrop = function(){
console.log(7,"在目標(biāo)元素上放手");
target.appendChild(box);
}
</script>
</html>
console.log(7,"在目標(biāo)元素上放手");在默認(rèn)情況下是不會顯示的，因為：瀏覽器默認(rèn)禁止在元素上drop，禁止將其他元素拖拽到目標(biāo)元素上放手。
需要在dragover時阻止瀏覽器的默認(rèn)事件，才能觸發(fā)ondrop。
在函數(shù)ondragstart中可以使用e來接收全局的事件，e.dataTransfer.setData可以設(shè)置數(shù)據(jù)，既可以設(shè)置一個字符串，也可以使用目標(biāo)對象的屬性。
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: 數(shù)據(jù)格式，支持text URL 或其它MIME類型
- content: 要傳遞的內(nèi)容
e.dataTransfer.effectAllowed設(shè)置拖拽元素的鼠標(biāo)效果
- 常見的有：copy link move all copyLink ...
當(dāng)指定為none時，ondropystart里設(shè)置
e.dataTransfer.dropEffect設(shè)置目標(biāo)元素的鼠標(biāo)效果
如果和effectAllowed同時指定，則必須與effectAllowed值相同，否則無法放置拖拽元素。
阻止瀏覽器默認(rèn)的下載或打開文件，直接讀取圖片并顯示：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.box{
width: 600px;
height: 80px;
line-height: 80px;
border:1px solid;
border-radius: 5px;
margin:0 auto;
text-align: center;
font-size: 3rem;
}
</style>
<body>
<div class="box">拖拽文件到此處</div>
</body>
<script type="text/javascript">
var box = document.querySelector(".box");
box.ondragover = function(e){
e.preventDefault();
}
box.ondrop = function(e){
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(){
var img = new Image();
img.src = this.result;
document.body.appendChild(img);
}
}
}
</script>
</html>
