0
| 上一月 | 一 | 下一月 | ||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
鼠标拖放(Drag and Drop)是Web应用中常见的交互方式，JavaScript提供了完整的API来支持这一功能。以下是实现拖放功能的主要知识点：
拖放操作涉及两个主要部分：
1230博客
<div id="dragItem" draggable="true">拖我</div>
const dragItem = document.getElementById('dragItem');
// 拖动开始时触发
dragItem.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.id); // 传递数据
this.style.opacity = '0.4'; // 视觉反馈
});
<div id="dropZone">放在这里</div>
const dropZone = document.getElementById('dropZone');
// 当拖动元素进入放置区域时触发
dropZone.addEventListener('dragenter', function(e) {
e.preventDefault();
this.style.backgroundColor = 'lightblue';
});
// 当拖动元素在放置区域内移动时触发
dropZone.addEventListener('dragover', function(e) {
e.preventDefault(); // 必须阻止默认行为才能放置
this.style.backgroundColor = 'lightgreen';
});
// 当拖动元素离开放置区域时触发
dropZone.addEventListener('dragleave', function() {
this.style.backgroundColor = '';
});
// 当元素被放置时触发
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
this.style.backgroundColor = '';
const data = e.dataTransfer.getData('text/plain');
const draggedItem = document.getElementById(data);
this.appendChild(draggedItem);
draggedItem.style.opacity = '1';
});
dragItem.addEventListener('dragend', function() {
this.style.opacity = '1'; // 恢复透明度
});
<!DOCTYPE html>
<html>
<head>
<style>
#dragItem {
width: 100px;
height: 100px;
background-color: coral;
display: flex;
align-items: center;
justify-content: center;
cursor: move;
}
#dropZone {
width: 300px;
height: 200px;
border: 2px dashed #ccc;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="dragItem" draggable="true">拖我</div>
<div id="dropZone">放在这里</div>
<script>
const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');
dragItem.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.id);
this.style.opacity = '0.4';
});
dropZone.addEventListener('dragenter', function(e) {
e.preventDefault();
this.style.backgroundColor = 'lightblue';
});
dropZone.addEventListener('dragover', function(e) {
e.preventDefault();
this.style.backgroundColor = 'lightgreen';
});
dropZone.addEventListener('dragleave', function() {
this.style.backgroundColor = '';
});
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
this.style.backgroundColor = '';
const data = e.dataTransfer.getData('text/plain');
const draggedItem = document.getElementById(data);
this.appendChild(draggedItem);
draggedItem.style.opacity = '1';
});
dragItem.addEventListener('dragend', function() {
this.style.opacity = '1';
});
</script>
</body>
</html>
// 设置数据
e.dataTransfer.setData('application/json', JSON.stringify({id: 123, name: 'Item'}));
// 获取数据
const data = JSON.parse(e.dataTransfer.getData('application/json'));
dragItem.addEventListener('dragstart', function(e) {
const dragIcon = document.createElement('div');
dragIcon.textContent = '正在拖动';
dragIcon.style.background = 'yellow';
document.body.appendChild(dragIcon);
e.dataTransfer.setDragImage(dragIcon, 10, 10);
// 拖动结束后移除
setTimeout(() => document.body.removeChild(dragIcon), 0);
});
dropZone.addEventListener('dragover', function(e) {
if (e.dataTransfer.types.includes('text/plain')) {
e.preventDefault(); // 只允许特定类型的数据
}
});
dragover事件中必须调用preventDefault()才能触发drop事件通过以上方法，你可以在Web应用中实现丰富的拖放交互功能。
热门推荐：
0
