一、H5拖拽和js拖拽
1、js拖拽
// 此处是改变盒子的位置来实现拖拽，所以css样式要设置盒子的position为absolute
let app = document.querySelector(`#app`)
app.onmousedown = function(e){ // 鼠标按下
// this.offsetLeft表示盒子关于浏览器左边的位置
// e.clientX表示鼠标相对于浏览器左边的位置
let x = e.clientX - this.offsetLeft // 鼠标所在位置与盒子的差值
let y = e.clientY - this.offsetTop
// console.log(e.clientX, this.offsetLeft, x);
app.onmousemove = function(e){ // 鼠标移动
app.style.cssText = `left:${e.clientX - x}px;top:${e.clientY - y}px`
// console.log(e.clientX,this.offsetLeft)
}
app.onmouseup = function(){ // 鼠标抬起
app.onmousemove = onmouseup = null // 清空抬起和移动事件
}
}
2、H5拖拽
<!-- draggable是H5的新特性，为让元素可拖拽 draggable属性值有三种：true,false,auto(根据浏览器定义是否可拖动)，且默认为true -->
<div id="app" draggable="true"></div>
<script>
let app = document.querySelector(`#app`)
app.ondragend = function(e){ // 鼠标抬起事件
this.style.cssText = `left:${e.clientX}px;top:${e.clientY}px`
}
</script>
二、拖拽七事件
1、拖拽元素事件–drag
| 事件 | 描述 |
|---|---|
| ondragstart | 拖拽开始事件 |
| ondrag | 拖拽过程中持续触发的事件 |
| ondragend | 拖拽结束事件 |
2、目标元素事件—target
| 事件 | 描述 |
|---|---|
| ondragenter | 进入目标元素时触发 |
| ondragover | 在目标元素中移动停留时触发 |
| ondragleave | 移出目标元素触发 |
| ondrop | 在目标元素上松开鼠标触发 |
在使用时，要注意阻止默认事件
<script>
// 拖拽元素事件
// 1.拖拽开始的事件
drag.ondragstart = function(){
this.style.background = 'red'
}
// 2.拖拽过程中持续触发的事件
drag.ondrag = function(){
console.log('我正在被移动')
}
// 3.拖拽结束的事件
drag.ondragend = function(){
this.style.background = 'blue'
}
// 二.拖拽目标元素时事件
// 1.元素进入目标元素时
target.ondragenter = function(){
this.innerText = '请释放鼠标删除'
}
// 2.元素在目标元素中移动停留时
target.ondragover = function(e){
this.innerText = '不要随意乱窜'
// 浏览器默认可以拖动一些东西，所以我们要阻止它,加在其他地方不行
e.preventDefault()
}
// 3.元素离开目标元素时
target.ondragleave = function(){
this.innerText = '在此处才可删除'
}
// 4.在目标元素上松开鼠标时
target.ondrop = function(){
document.body.removeChild(drag) // 借助父级删除子级
this.innerText = '文件已删除'
}
</script>
三、常用属性
| 属性 | 描述 |
|---|---|
| dataTransfer | 用于保存拖拽过程中的数据 |
| dropEffect | 获取当前选定的拖放操作类型或改变类型 |
| effectAllowed | 设置拖拽中允许的效果 |
<script>
// 拖拽元素事件
// 1.拖拽开始的事件
drag.ondragstart = function(e){
this.style.background = 'red'
// effectAllowed：设置本次拖拉中允许的效果，值为copy|move|link|copyLink|copyMove|linkMove|all|none|uninitialized,ondragstart可以用来设置这个属性，其他事件中设置这个属性是无效的。
e.dataTransfer.effectAllowd = 'link'
console.log(e.dataTransfer)
}
// 2.拖拽过程中持续触发的事件
drag.ondrag = function(){
console.log('我正在被移动')
}
// 3.拖拽结束的事件
drag.ondragend = function(){
this.style.background = 'blue'
}
// 二.拖拽到目标元素时事件
// 1.元素进入目标元素时
target.ondragenter = function(e){
this.innerText = '请释放鼠标删除'
console.log(e)
}
// 2.元素在目标元素中移动停留时
target.ondragover = function(e){
// dataTransfer：该对象用于保存拖拽过程中的数据，所以我们可以用这个属性获取相关的数据信息
// dropEffect：获取当前选定的拖放操作类型或者设置的为一个新的类型，可以改变光标的显示样式，要跟effectAllowed搭配使用，否则不生效。值必须为none|copy|link|move。但在此，不用effectAllowed也生效,但只有effectAllowed不会生效
// 只要dropEffect属性和effectAllowed属性之中，有一个为none，就无法在目标节点上完成drop操作。
e.dataTransfer.dropEffect = 'none'
this.innerText = '不要随意乱窜'
// 浏览器默认可以拖动一些东西，所以我们要阻止它,加在其他地方不行
// DragEvent中的属性
e.preventDefault()
}
// 3.元素离开目标元素时
target.ondragleave = function(){
this.innerText = '在此处才可删除'
}
// 4.在目标元素上松开鼠标时
target.ondrop = function(){
document.body.removeChild(drag)
this.innerText = '文件已删除'
}
</script>
四、文件信息读取
// 用e.dataTransfer.files来获取文件或图片的相关信息，然后基于这些信息用FileReader或Blob来读取内容。操作一般是本地拖拽，都在ondragover和ondrop事件中。
// 本地拖拽
target.ondragover = function(e){
this.innerText = '松开鼠标删除图片'
e.preventDefault()
}
target.ondrop = function(e){
// e.dataTransfer.files获取文件信息，基本上都是从本地拖拽
console.log(e.dataTransfer.files) // 可获取拖拽文件的名字、长度、大小、类型
// 阻止默认事件，浏览器默认打开拖拽过来的图片
e.preventDefault()
}
1、FileReader读取文本文件
<script>
target.ondragover = function(e){
this.innerText = '松开鼠标读取文件内容'
e.preventDefault()
}
target.ondrop = function(e){
const fileInfo = e.dataTransfer.files
e.preventDefault()
var file = fileInfo[0]
//创建一个文件读取对象的实例
var reader = new FileReader()
// 此实例的方法
// reader.readAsBinaryString(file) //使用原始二进制的字符串来展示文件数据
// reader.readAsDataURL() //使用URL来展示文件数据
// raeder.readAsArrayBuffer() //使用指定的二进制对象来读取内容
// raeder.readAsText() //使用文本字符串来展示文件数据
console.log(reader)
reader.readAsText(file)
reader.onloadend = function(e){
// 在执行下面内容时，要先判断其状态。其中属性readyState代表文件当前状态，
// 1为loading，表示正在加载；
// 0为empty，未加载任何数据；
// 2为done，表示加载完毕
if(e.target.readyState === FileReader.DONE){ // 判断文件加载完毕，执行以下内容
let result = reader.result
// console.log(result)
target.innerHTML = 'File:' + file.name + result
}
}
}
</script>
2、FileReader读取图片
<script>
target.ondragover = function(e){
this.innerText = '松开鼠标读取文件内容'
e.preventDefault()
}
target.ondrop = function(e){
const fileInfo = e.dataTransfer.files
e.preventDefault()
var file = fileInfo[0]
var reader = new FileReader()
console.log(reader)
reader.readAsDataURL(file)
reader.onloadend = function(e){
const img = new Image()
console.log(reader.result) //此处显示的是base64编码的图片路径
img.src = reader.result
// 设置一下图片大小
img.width = 300
img.height = 400
target.appendChild(img)
}
}
</script>
3、 Blob读取文本内容
<script>
target.ondragover = function(e){
this.innerText = '松开鼠标读取文件内容'
e.preventDefault()
}
//async/await异步
target.ondrop = async function(e){
e.preventDefault()
this.innerText = '文件读取成功'
const fileInfo = e.dataTransfer.files
let file = fileInfo[0]
console.log(file)
let blob = new Blob([file],{type:'text/plain'})
let text = await blob.text()
target.innerHTML = 'File:' + file.name + text
// console.log(text)
}
</script>
4、Blob读取图片
<script>
target.ondragover = function(e){
this.innerText = '松开鼠标读取文件内容'
e.preventDefault()
}
target.ondrop = function(e){
e.preventDefault()
this.innerText = '文件读取成功'
const fileInfo = e.dataTransfer.files
let file = fileInfo[0]
//第一个参数一定是数组，第二个是文件类型
let blob = new Blob([file],{type:'imag/jpeg'})
//或者，且type的值可以变，值为text，可读取文件内容；imag/jpeg可读取图片内容
// let blob = new Blob([file])
let url = window.URL.createObjectURL(blob)
console.log(url)
let img = new Image()
img.width = 300
img.height = 300
img.src = url
img.onload = function(){
target.appendChild(this)
}
}
</script>
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
