HTML5属性-拖拽

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

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

在HTML5中，可以使用draggable属性来使元素可拖拽。此外，还需要使用JavaScript来处理拖拽事件。

以下是一个简单的示例，展示了如何使一个div元素可拖拽：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽示例</title>
<style>
#draggable {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  text-align: center;
  line-height: 100px;
  border: 2px dashed #333;
  cursor: move;
}
</style>
</head>
<body>
 
<div id="draggable" draggable="true">拖动我</div>
 
<script>
var dragItem = document.getElementById('draggable');
 
dragItem.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', null); // 设置数据传输的类型
});
 
dragItem.addEventListener('dragend', function(event) {
  // 拖动结束时的操作
});
 
document.addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为
});
 
document.addEventListener('drop', function(event) {
  event.preventDefault(); // 阻止默认行为
  var x = event.clientX;
  var y = event.clientY;
  dragItem.style.left = x + 'px';
  dragItem.style.top = y + 'px';
});
</script>
 
</body>
</html>

在这个示例中，draggable属性被添加到了div元素上，使其可以被拖拽。dragstart和dragend事件被用来设置和清理拖拽操作。dragover事件的默认行为被阻止以允许数据交换，drop事件也被用来处理放置操作，在这里我们将元素放置在鼠标光标的位置。

HTML5属性-拖拽

评论已关闭

推荐阅读