Drag and Drop基础用法
时间: 2023-07-28 12:06:21 浏览: 54
Drag and Drop 是一种在网页或应用程序中实现元素拖拽和放置的技术。以下是基础用法:
1. 给要拖拽的元素添加 draggable 属性:
```
<div draggable="true">拖拽我</div>
```
2. 给要放置的元素添加 dropzone 属性:
```
<div dropzone="copy move link"></div>
```
3. 添加事件监听器来处理拖拽和放置操作:
```
// 拖拽开始
element.addEventListener("dragstart", function(event) {
// 设置数据
event.dataTransfer.setData("text/plain", "Hello World");
});
// 元素正在被拖拽
element.addEventListener("drag", function(event) {
// do something
});
// 元素被拖拽到了 drop zone 中
element.addEventListener("dragenter", function(event) {
// 阻止默认行为
event.preventDefault();
});
// 元素在 drop zone 中移动
element.addEventListener("dragover", function(event) {
// 阻止默认行为
event.preventDefault();
});
// 元素被放置到 drop zone 中
element.addEventListener("drop", function(event) {
// 阻止默认行为
event.preventDefault();
// 获取数据
var data = event.dataTransfer.getData("text/plain");
// do something with data
});
```
这些基本的事件监听器可以让你实现拖拽和放置功能。你可以根据具体需求自定义事件处理程序。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)