1.设置拖拽
图片元素自带拖拽属性,其他元素可设置draggable属性.
<div draggable="true"></div>元素设置拖拽之后可以看到拖动.
不设置拖拽时除了图片元素其他元素是不可拖拽的.
1.1 拖拽元素事件
- ondragstar:拖拽前出发,事件只会触发一次.
- ondrag:拖拽前,拖拽结束之间触发,事件会连续触发,
- ondragend:拖拽结束触发,事件只触发一次.
let box = document.querySelector('.box')
box.ondragstart = function (e) {
console.log('拖拽开始')
}
box.ondrag = function (e) {
console.log('拖拽ing.......')
}
box.ondragend = function (e) {
console.log('拖拽结束')
}打印的结果:
1.2 目标元素拖拽事件
- ondragenter:进入目标元素触发
- ondragover:进入目标元素触发
- ondragleave:离开目标元素触发
- ondrop:在目标元素上释放鼠标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
float: left;
width: 300px;
height: 400px;
background-color: skyblue;
font-size:20px;
color:purple;
text-align: center;
line-height:400px;
}
.box {
float: right;
width: 150px;
height: 150px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<!-- <img src="https://img9.doubanio.com/view/photo/l/public/p2492913246.webp" width="200"> -->
<div class="wrap">把元素移入这里</div>
<script>
let wrap = document.querySelector('.wrap')
let box = document.querySelector(".box");
//被拖拽元素对象事件
// dragstart 拖拽开始时触发,只触发一次
box.ondragstart = function () {
this.style.background = 'blue';
}
// drag拖拽触发的事件,连续触发,只要鼠标不松开会一直触发
box.ondrag = function () {
this.style.background = 'yellow';
}
// dragend 拖拽结束时,触发的事件,只要鼠标一松开就触发
box.ondragend = function () {
this.style.background = 'pink';
}
//拖拽元素被拖拽到的对象事件
//进入目标元素触发
wrap.ondragenter = function () {
this.innerHTML = '元素进入了'
}
//离开目标元素触发
wrap.ondragleave = function () {
this.innerHTML = '讨厌,谁让你离开的'
}
//在目标元素中移动触发
wrap.ondragover = function () {
this.innerHTML = '元素移动了'
return false;
}
//在目标元素上释放鼠标触发
wrap.ondrop = function () {
this.innerHTML = '鼠标松开了'
}
</script>
</body>
</html>
1.2 dataTransfer对象
dataTransfer 是拖拽事件对象的属性 .
1.setData() : 设置数据 key和value(必须是字符串)
2.getData() : 获取数据，根据key值，获取对应的value
let box = document.querySelector(".box");
let wrap = document.querySelector(".wrap");
//datatransfer 拖拽对象的事件属性
box.ondragstart = function (e) {
this.style.background = 'pink';
e.dataTransfer.setData('key', this.className);
// 火狐必须加上这一行代码才能触发drag和dragend事件
}
wrap.ondragover = function () {
console.log(1)
return false
}
// 设置的key在这里可以使用
wrap.ondrop = function (e) {
this.style.background = 'skyblue';
//获取box元素
let key =document.querySelector("."+ e.dataTransfer.getData("key"));
// console.log(key);
//删除box
document.body.removeChild(key);
}元素移入之后就被删除了
3.effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
box.ondragstart = function (e) {
e.dataTransfer.effectAllowed = 'link';
}4.files:获取外部拖拽的文件，返回一个filesList列表 filesList下有个type属性,返回文件的类型
wrap.ondrop = function (e) {
let a = e.dataTransfer;
console.log(a.files)
return false;
}当我把文件拖入之后,打印的结果如下图(可以看到图片的大小,类型,最后修改时间等信息):
2.读取文件信息
通过FileReader对象可以读取本地存储的文件信息, 使用File对象 指定要读取的文件数据.
2.1 FileReader读取文件信息(利用拖拽来读取文件信息)
readAsDataURL 参数为要读取的文件对象
onload当读取文件成功完成的时候触发此事件
this. result 获取读取的文件数据
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 100px;
margin: 20px auto;
border-radius: 5px;
background-color: #ccc;
font-size: 18px;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 100px;
}
.container {
width: 800px;
height: 400px;
margin: 20px auto;
border: 2px solid skyblue;
}
.container>img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">把图片拖至这里</div>
<!-- 用来展示已经拖入的图片 -->
<div class="container"></div>
<script>
//获取元素
let box = document.querySelector('.box');
let container = document.querySelector(".container");
box.ondragover = function (ev) {
//阻止默认事件
ev.preventDefault();
//阻止事件冒泡
ev.stopPropagation();
return false;
}
box.ondrop = function (ev) {
ev.preventDefault()
ev.stopPropagation()
//获取文件信息
console.log(ev.dataTransfer.files)
let file = ev.dataTransfer.files[0];
//创建读取文件的对象
let oFiles = new FileReader();
console.log(oFiles)
//获取文件的URL地址
oFiles.readAsDataURL(file);
//文件信息读取完成之后会触发onload 事件
oFiles.onload = function () {
let src = this.result;
// console.log(src);
if (file.type.includes('image')) {
//创建图片标签
let img = new Image();
//设置渲染图片的URL地址
img.src = src;
//将图片作为contianer的子元素渲染到页面中
container.appendChild(img);
}
}
return false;
}
</script>
</body>
</html>
2.2 利用表单域读取文件信息
表单域返回的DOM元素身上有一个files的属性,这个属性值就是一个Files对象, 里面保存选中的文件的信息
选择文件之后出发onchange事件.
一段代码:
//表单域返回的DOM元素身上有一个files的属性,这个属性值就是一个Files对象, 里面保存选中的文件的信息
var file = document.querySelector('#file');
file.onchange = function() {
console.dir(this);
}
利用表单读取文件信息:
<input type="file" name="file" multiple />
<script>
var file = document.querySelector("input")
file.addEventListener("change",function(){
console.log(this.files)
},false)
</script>案例
html代码:
<input type="file" id='file' multiple/>
<div class="container"></div>JavaScript代码
//获取元素
let container = document.querySelector(".container");
let file = document.querySelector('#file');
file.onchange = function () {
let files = this.files;
let length = files.length;
if(length){
for(let i = 0; i < length; i++){
Render(files[i])
}
}
}
function Render(file) {
//创建读取文件的对象
let oFile = new FileReader();
// 通过读取文件对象的readAsDataURL 方法读取指定的文件
oFile.readAsDataURL(file);
//文件信息读取完毕触发onload事件
oFile.onload = function() {
let src = this.result;
//创建图片标签
let img = new Image();
img.src = src;
container.appendChild(img);
}
}最终实现的效果就是可以同时上传多个图片
