<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
display: flex;
width: 100%;
justify-content: center;
margin-top: 300px;
align-items: center;
}
#drag{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
border-radius: 10px;
align-items: center;
background-color: #00FFFF;
}
#draged{
width: 400px;
height: 400px;
/* border: 4px pink; */
border-style: dashed;
margin-left: 100px;
border-radius: 10px;
/* border: 4px dashed #AAAAAA; */
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
/* 隐藏滚动条 */
#draged::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
#draged::before{
content: '请拖拽到此处';
color: #AAAAAA;
position: absolute;
z-index: -1;
}
#draged img {
width: 50%;
height: 50%;
object-fit: contain;
margin-top: 20px;
}
.dragover{
border: 4px orangered;
}
.dropSucess{
border: 4px green;
}
</style>
</head>
<body>
<div class="box">
<!-- 可拖拽元素 ，img元素和超链接a标签，默认允许拖放，可定义draggable，可以不定义draggable-->
<div id="drag" draggable="true" class="drag">可拖拽元素</div>
<!-- 必须阻止默认事件，因为浏览器对拖拽事件的默认处理方式是禁止拖拽 -->
<!-- ondrag 是拖拽开始，可存放拖拽数据，列如元素，class，id等 -->
<!-- ondragover是元素进入放置区域，可进行更改样式等操作 -->
<!-- ondrop元素放置时的事件，可以对元素进行真实的移动操作 -->
<!-- 可放置区域,存放可拖拽的元素， -->
<div id="draged" class=""></div>
<input id="upload" type="file" value="file"/>
</div>
<script type="text/javascript">
const drag = document.getElementById('drag')
const draged = document.getElementById('draged')
/*
拖动事件
可拖动元素可以触发的：
dragstart：鼠标点中元素并且开始移动时触发
drag：拖拽过程中持续触发
dragend：拖拽结束松开鼠标时触发
当可拖拽元素到某个目标元素时，目标元素会触发的：
dragenter：拖拽元素到目标上时触发
dragover：拖动元素在目标元素中，持续触发
dragleave：离开目标元素时触发
drop：拖放元素到了目标元素中松开鼠标时触发
e.preventDefault(); 每个动作内部必须，写入这个，防止默认事件的产生。
拖拽事件中会初始化一个dataTransfer对象，用于保存拖拽数据和交互信息，在进行拖放操作
的时候，dataTransfer对象可以用来保存被拖动的数据。
他可以保存一项或多项数据，一种或多种数据类型，就是可以通过它来传输被拖动的数据。
以便在拖拽结束的时候，对拖拽数据进行其他操作。
clearData方法可以用来清除dataTransfer对象内的数据，可以指定删除特定格式的数据，
如果不指定格式，则默认删除所有携带的数据。
setData 方法在拖拽开始的时候向dataTransfer存放数据，用types属性来指定数据的MIME类型
getData 方法返回指定数据，如果数据不存在，返回空字符串，getData方法在拖动
结束时读取dataTransfer对象中的数据。
setDragimage(Element image,x,y)：制定拖拽元素时跟随鼠标移动的图片，
x,y分别代表相对鼠标的坐标。
*/
// 拖拽开始
drag.addEventListener('dragstart',handleDragStart)
function handleDragStart(e){
//text/plain,imgage/png，等等类型 e.target.id 存放的值
e.dataTransfer.setData('text/plain',e.target.id)
}
//拖拽结束事件
draged.addEventListener('dragover',handleDrageover)
function handleDrageover(e){
// 阻止默认事件。不要让浏览器默认事件来干扰。拖拽操作
e.preventDefault()
draged.classList.add('dragover')
}
// 拖拽离开事件
draged.addEventListener('dragleave',handleDragLeave)
function handleDragLeave(e){
e.preventDefault()
draged.classList.remove('dragover')
}
// 拖拽释放
draged.addEventListener('drop',handleDrop)
function handleDrop(e){
e.preventDefault()
// 将dom元素拖拽进可放置区域
// const draggedId = e.dataTransfer.getData('text/plain') //标注： 拖拽dom元素
// draged.appendChild(document.getElementById('drag')) //标注： 拖拽dom元素
draged.classList.add('dropSucess')
// console.log(...e.dataTransfer.items)
// 拖拽也支持外部拖拽文件，图片进来，可以在该事件中监听，
// 如果是拖拽文件需要注释上面 “标注：拖拽dom元素” 两行代码，如果拖拽dom，注释下面文件拖拽上传代码
// 遍历e.dataTransfer.items 属性去做操作
// ...e.dataTransfer.items 可能为空，做一个判空处理
if([...e.dataTransfer.items]){
// 拖拽文件，解构成数组，如果是多个需要遍历，所以调用forEach
[...e.dataTransfer.items].forEach(item=>{
// 如果拖拽进来的是文件夹
let Directory = item.webkitGetAsEntry()
if(Directory.isDirectory) {
console.log('这是一个文件夹')
}
console.log(Directory);
// 通过kind属性判断拖拽进来的是不是文件
if(item.kind === 'file') {
const file = item.getAsFile()
//createPreview 生成预览,比如判断图片
Preview(file)
}
})
}
}
// 图片处理
function Preview(file){
// 如果是图片类型的文件
if(file.type.startsWith('image')){
// 创建一个图片元素
const image = document.createElement('img')
// 根据文件对象创建一个ObjectURL，用作src属性
image.src = URL.createObjectURL(file)
// 图片加载成功过后，ObjectURL就没有用了，就回收这个ObjectURL
file.onload = function(){
URL.revokeObjectURL(this.src)
}
// 把图片追加到可放置区域
draged.appendChild(image)
}
}
// 文件上传功能学习中，以下代码无效
async function dirReader(item){
let res = []
let internalProces = (item,path,res)=>{
if(item.isFile){
item.file(file=>{
file.path = path + file.name
let newFile = new File([file],file.path,{
type:file.type})
res.push(newFile)
})
} else if(item.isDirectory) {
let fileReader = file.createReader()
fileReader.readEntries(entries =>{
for(let i = 0; i < entries.length; i++){
internalProces(entries[i],path+item.name+"/",res)
}
})
}
}
await internalProces(item,'',res)
// console.log(res)
return res
}
</script>
</body>
</html>
JavaScript HTML5 dom，图片拖拽上传功能
猜你喜欢
转载自blog.csdn.net/Jonn1124/article/details/124990008
今日推荐
周排行