html5 draggable 随意拖动任意位置

HTML5 的 draggable 属性允许您使元素可拖动。然而，draggable 属性本身并不提供拖动后放置的功能。您需要使用 JavaScript 来处理拖动事件。

以下是一个简单的例子，展示了如何使元素可拖动，并且能够在页面上任意拖动：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable Element</title>
<style>
#draggable {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  text-align: center;
  line-height: 100px;
  border: 2px dashed black;
  cursor: move;
}
</style>
</head>
<body>
 
<div id="draggable" draggable="true">Drag me!</div>
 
<script>
// 获取可拖动元素
var dragItem = document.getElementById('draggable');
 
// 监听拖动开始事件
dragItem.addEventListener('dragstart', function(event) {
  // 设置数据类型和值
  event.dataTransfer.setData('text/plain', 'draggedItem');
});
 
// 监听拖动结束事件
dragItem.addEventListener('dragend', function(event) {
  // 可以在这里执行操作，比如更新应用状态
});
 
// 为页面添加拖动over和drop事件
document.addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为
});
 
document.addEventListener('drop', function(event) {
  event.preventDefault(); // 阻止默认行为
 
  // 获取被拖动的元素
  var draggedItem = document.getElementById(event.dataTransfer.getData('text/plain'));
 
  // 如果元素存在，将其添加到放置目标
  if (draggedItem) {
    draggedItem.style.position = 'relative';
    draggedItem.style.left = event.clientX - draggedItem.offsetWidth / 2 + 'px';
    draggedItem.style.top = event.clientY - draggedItem.offsetHeight / 2 + 'px';
  }
});
</script>
 
</body>
</html>

在这个例子中，draggable 属性被用于使元素可拖动。dragstart 和 dragend 事件用于处理拖动的开始和结束。dragover 和 drop 事件用于处理拖动过程中的元素放置。通过 JavaScript，我们在 drop 事件中更新了元素的位置，使其能够在页面上任意拖动。

html5 draggable 随意拖动任意位置

评论已关闭

推荐阅读