一、知识储备
1.可拖拽元素
<div id="draggable" class="draggable" draggable="true" ondrag="handleDrag"></div>
1.draggable="true"
2.ondrag 开始拖拽事件,可存放拖拽数据,例如元素ID
2.可放置区域
<div id="droppable" class="droppable" ondragover="handleDragOver" ondrop="handleDrop"></div>
1.必须设置e.preventDefault()阻止默认事件,因为浏览器对拖拽事件的默认处理方式的禁止的
2.ondragover 当拖拽元素进入到放置区域时触发的事件,可以更改样式等操作
3.ondrop 是拖拽元素放置后触发的事件,对拖拽元素进行真实的移动
二、代码实现
这里实现了两种操作
1.将div拖拽到指定区域
2.将图片拖拽到指定区域并预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
main{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
background: hsl(0deg, 0%, 20%);
}
.dragable-container{
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.draggable,.droppable{
border-radius: 4px;
}
.draggable{
width: 25vw;
height: 25vh;
background-color: #00d9ff;
}
.droppable{
width: 30vw;
height: 30vw;
border: 8px dashed #00d9ff;
position: relative;
display: grid;
place-items: center;
}
.droppable::before{
display: block;
content: "请拖放到此处";
position: absolute;
color: white;
font-family: sans-serif;
font-size: 3vw;
color: hsl(0, 0%, 30%);
}
.dragover{
border: 8px dashed #ffae00;
}
.dropped{
border: 8px dashed #48ff00;
}
.dropped::before{
z-index: -1;
}
.droppable img{
width: 80%;
height: 80%;
object-fit: contain;
}
</style>
</head>
<body>
<main>
<div class="dragable-container">
<div id="draggable" class="draggable" draggable="true"></div>
</div>
<div id="droppable" class="droppable"></div>
</main>
<script>
const draggable = document.getElementById('draggable')
const droppable = document.getElementById('droppable')
draggable.addEventListener('dragstart',handleDragStart);
function handleDragStart(e){
e.dataTransfer.setData("text/plain",e.target.id)
}
droppable.addEventListener('dragover',handleDragOver)
function handleDragOver(e){
e.preventDefault()
droppable.classList.add('dragover')
}
droppable.addEventListener('dragleave',handleDragLeave)
function handleDragLeave(e){
droppable.classList.remove('dragover')
}
droppable.addEventListener('drop',handleDrag)
function handleDrag(e){
e.preventDefault();
// const draggedId = e.dataTransfer.getData("text/plain");
// droppable.appendChild(document.getElementById(draggedId));
droppable.classList.add('dropped');
[...e.dataTransfer.items].forEach((item)=>{
if(item.kind === 'file'){
const file = item.getAsFile();
createPreview(file);
}
})
}
function createPreview(imageFile){
//对拖拽元素进行格式判断
if(!imageFile.type.startsWith("/image")){
return;
}
const image = document.createElement('img');
image.src = URL.createObjectURL(imageFile);
image.onload = function(){
URL.revokeObjectURL(this.src);
}
droppable.appendChild(image)
}
</script>
</body>
</html>
三、效果