拖拽理解
拖拽主要是将一个DOM放到另一个DOM中，被拖拽的元素称为源DOM，存放DOM的容器称为目标DOM;除图片等元素外，默认DOM元素无法被拖拽，如果需要拖拽该元素需要设定draggable="true"，例如： <li draggable="true">列1</li>
源DOM
源DOM主要有3个事件：ondragstart、ondrag、ondragend
ondropstart: 开始拖拽时触发
ondrag：拖拽中触发
ondragend： 停止拖拽触发
目标DOM
主要有4个事件：ondragenter、ondragover、dragleave、drop
ondragenter：源DOM进入目标DOM触发
ondragover：源DOM在目标DOM区域内拖拽触发
dragleave：源DOM离开目标DOM区域拖拽触发
drop：鼠标离开触发
简单将列表拖拽至指定区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
float: left;
border: 2px solid #ccc;
width: 305px;
padding: 0;
min-height: 300px;
text-align: center;
}
span {
display: inline-block;
margin: 20px 0;
}
li {
list-style: none;
background-color: green;
margin-bottom: 10px;
width: 300px;
height: 100px;
color: #fff;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
div {
text-align: center;
float: right;
right: 600px;
width: 310px;
min-height: 500px;
border: 2px solid pink;
margin-left: 30px;
}
</style>
</head>
<body>
<ul>
<span>源DOM</span>
<li draggable="true">列1</li>
<li draggable="true">列2</li>
<li draggable="true">列3</li>
<li draggable="true">列4</li>
<li draggable="true">列5</li>
</ul>
<div>
<span>目标DOM</span>
</div>
<script>
var lis = document.querySelectorAll('li') // 源DOM
var divd = document.querySelector('div') // 目标DOM
var ul = document.querySelector('ul')
var currentDom = null //当前被拖拽的元素
for (var i = 0; i < lis.length; i++) {
// 创建一个小li
lis[i].setAttribute('index', i);
}
lis.forEach(item=> {
item.ondragstart = function (ev) {
currentDom = this
// console.log('开始拖动了')
}
item.ondrag = function (ev) {
// console.log('拖动中')
}
item.ondragend = function (ev) {
// console.log('停了')
}
})
divd.addEventListener('dragenter', function () {
console.log('拖进来了')
})
divd.addEventListener('dragover', function (ev) {
console.log('拖进来了后在容器内移动')
ev.preventDefault()
})
divd.addEventListener('dragleave', function (ev) {
console.log('移出容器')
})
divd.addEventListener('drop', function (ev) {
console.log('鼠标放开了')
console.log(ev.target)
this.appendChild(currentDom)
})
// ul作为目标区域
ul.addEventListener('dragover', function (ev) {
ev.preventDefault()
})
ul.addEventListener('drop', function (ev) {
this.appendChild(currentDom)
})
</script>
</body>
</html>
将指定文件拖拽至指定区域上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#dropbox {
display: inline-block;
width: 300px;
height: 300px;
border: 1px #ccc solid;
margin: 100px 0 0 100px;
text-align: center;
vertical-align: bottom;
}
.convas-img>li>img {
height: 100px;
width: 100px;
margin-right: 10px;
}
.convas-img>li {
display: inline-block;
position: relative;
padding: 10px;
border: 1px solid #ccc;
}
.convas-img>li>i {
position: absolute;
top: -3px;
right: 5px;
}
button {
display: inline-block;
}
</style>
</head>
<body>
<div id="dropbox">
文件拖拽到处
</div>
<button>上传</button>
<ul class="convas-img">
</ul>
<script>
// 目标DOM
var dropbox = document.querySelector('#dropbox')
var convas = document.querySelector('.convas-img')
var btn = document.querySelector('button')
var allBaseImg = []
var bigImgSize = 1024*400 //图片大小不能超过400K
dropbox.ondragenter = function (ev) {
// console.log(ev.target)
}
dropbox.ondragover = function (ev) {
ev.preventDefault()
}
dropbox.ondrop = function (ev) {
ev.preventDefault()
var fileLists = ev.dataTransfer.files
// console.log(fileLists)
transferTBase64(fileLists)
}
// 转换成Base64
function transferTBase64(fileLists) {
for (let i = 0; i < fileLists.length; i++) {
var reader = new FileReader()
reader.readAsDataURL(fileLists[i]) //异步方法
reader.onload = function (ev) { //成功后回调
var b64 = ev.currentTarget.result // Base64图片
if (b64.length> bigImgSize) {
alert('上传图片不能大于400K')
return
}
if (!allBaseImg.includes(b64) ) {
allBaseImg.push(b64)
}
var img = `<li><img src='${b64}'><i class="close">X</i></li>`
convas.innerHTML += img
}
}
}
convas.addEventListener('click', function (e) {
let targetDom = e.target
if(targetDom.className === 'close') {
let deleImg = targetDom.previousElementSibling.src
let index = allBaseImg.indexOf(deleImg)
allBaseImg.splice(index,1)
// console.log(allBaseImg)
// console.log(deleImg)
targetDom.parentElement.remove()
}
})
btn.onclick = function() {
console.log('调用接口上传图片')
console.log(allBaseImg)
}
</script>
</body>
</html>
