使用draggable实现拖拽，并携带参数

作者：System 时间：2024年08月11日分类：所有,html5 字数：1329

这篇文章距离上次修改已过450天，其中的内容可能已经有所变动。

在HTML5中，可以使用draggable属性让元素可拖拽。如果你想在拖拽时携带参数，可以使用自定义DataTransfer属性。

以下是一个简单的示例，演示如何使用draggable实现拖拽，并在拖拽时携带参数：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable Example</title>
<style>
#dropZone {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  margin-top: 10px;
  text-align: center;
  line-height: 200px;
  font-size: 24px;
  color: #fff;
  background-color: #00f;
}
</style>
</head>
<body>
 
<div id="draggable" draggable="true">Drag Me</div>
<div id="dropZone">Drop Here</div>
 
<script>
document.getElementById('draggable').addEventListener('dragstart', function(event) {
  // 设置要携带的参数
  event.dataTransfer.setData('text', 'someData');
});
 
document.getElementById('dropZone').addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为
});
 
document.getElementById('dropZone').addEventListener('drop', function(event) {
  event.preventDefault(); // 阻止默认行为
  // 获取携带的参数
  var data = event.dataTransfer.getData('text');
  this.innerHTML = 'Dropped with data: ' + data;
});
</script>
 
</body>
</html>

在上述代码中，我们有一个可拖拽的元素#draggable和一个可放置的区域#dropZone。在dragstart事件中，我们使用event.dataTransfer.setData方法设置了一个自定义的数据项text，它包含了我们想要携带的数据（这里是someData）。然后，在drop事件中，我们通过event.dataTransfer.getData方法读取了这个数据，并将其显示在放置区域内。

使用draggable实现拖拽，并携带参数

评论已关闭

推荐阅读