元素拖拽要使用html5的新增属性draggable="true"，实际上这个属性默认就是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,"拖拽结束");
}
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);
}
</script>
</html>
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值相同，否则无法放置拖拽元素。
阻止浏览器默认的下载或打开文件，直接读取图片并显示：
<!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>
网友评论