元素拖动
- HTML5 已经完全支持鼠标拖动元素，其中图片和链接默认就支持拖拽，而其他的元素需要设置属性 draggable=“true” 就可支持拖拽；其中在拖拽的过程中会默认触发一系列事件；
- draggable 全局拖拽属性，规定元素是否可拖动；
- true：规定元素的可拖动的；
- false：规定元素不可拖动；
- auto：使用浏览器的默认行为；
Dom 事件
| 事件 | 应用元素 | 描述 |
|---|---|---|
| ondragstart | 当前被拖拽元素 | 用户开始拖动元素时触发 |
| ondrag | 当前被拖拽元素 | 元素正在拖动时触发（整个过程持续触发） |
| ondragend | 当前被拖拽元素 | 用户完成元素拖动后触发 |
| ondragleave | 当前被拖拽元素 | 当鼠标离开拖拽元素时调用 |
| ondragenter | 目标元素 | 当鼠标拖拽元素进入时调用 |
| ondragover | 目标元素 | 当停留在目标元素上时调用（持续触发） |
| ondrop | 目标元素 | 当在目标元素上松开鼠标时调用 |
| ondragleave | 目标元素 | 当鼠标离开目标元素时调用 |
目标元素 ondrop 不生效
问题：ondrop 事件始终不触发，原因是 ondragover 事件是 被拖拽元素 在 目标元素上 拖拽过程中由目标元素触发，ondrop 事件是 被拖拽元素 在 目标元素 上面 drop 的时候由目标元素触发；
解决：取消掉 ondragover 它的默认事件 e.preventDefault() 才可以正确触发；
案例一
示例代码
HTML
JavaScript
CSS
<body>
<div class="continer">
<div id="box1" class="box">
<ul style="padding: 0;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="box2" class="box"></div>
</div>
</body>
let dragDom;
let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
let liList = document.getElementsByTagName('li');
Array.from(liList).forEach((el, inx) => {
el.setAttribute('draggable', true);
el.ondragstart = function (e) {
dragDom = e.target;
}
});
box1.ondragover = function (e) {
e.preventDefault();
}
box1.ondrop = function (e) {
box1.appendChild(dragDom);
dragDom = null;
}
box2.ondragover = function (e) {
e.preventDefault();
}
box2.ondrop = function (e) {
box2.appendChild(dragDom);
dragDom = null;
}
.continer {
display: flex;
}
.box {
width: 300px;
border: 1px solid #eee;
padding-bottom: 10px;
padding: 10px;
margin: 10px;
box-sizing: border-box;
}
.box li {
position: relative;
width: 100%;
height: 30px;
background: aquamarine;
margin: 10px auto 0;
list-style: none;
text-align: center;
line-height: 30px;
}
效果展示
案例二
示例代码
HTML
JavaScript
CSS
<div id="app">
<div class="upload" draggable="true">
<div>将图片拖到此处进行上传</div>
</div>
<div class="images"></div>
</div>
const upload = document.querySelector('.upload');
const imageContainer = document.querySelector('.images');
upload.addEventListener('dragover', ondragover);
upload.addEventListener('drop', ondrop);
function ondragover(event) {
event.preventDefault();
}
function ondrop(event) {
event.preventDefault();
const { files } = event.dataTransfer;
Array.from(files).forEach(blob => {
const url = window.URL.createObjectURL(new Blob([blob]));
const img = document.createElement('img');
img.src = url;
imageContainer.appendChild(img);
})
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#app {
width: 100vw;
height: 100vh;
padding: 50px 0 0 50px;
box-sizing: border-box;
}
.upload {
width: 360px;
height: 180px;
border: 1px dashed #c0c4cc;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.upload>div {
color: #606266;
font-size: 14px;
}
.images {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.images img {
width: 300px;
height: 180px;
margin-right: 20px;
}
效果展示
打赏作者
您的打赏是我前进的动力
微信
支付宝
属性篇：表单
上一篇
评论
