手动拖拽功能

最新推荐文章于 2024-09-17 21:49:02 发布

MYmayue

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量351

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/mymayue/article/details/140710951

版权

前端js实现手动拖拽某个元素；

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div Dragging Example</title>
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    cursor: move;
    position: absolute;
  }
</style>
</head>
<body>
<div id="draggable">Drag me!</div>
<script>
  var draggableElement = document.getElementById('draggable');
  var dragging = false;
  var currentX, currentY;
  var initialX, initialY;
  draggableElement.addEventListener('mousedown', function(e) {
    dragging = true;
    initialX = e.clientX - draggableElement.offsetLeft;
    initialY = e.clientY - draggableElement.offsetTop;
  });
  document.addEventListener('mousemove', function(e) {
    if (!dragging) return;
    e.preventDefault();
    currentX = e.clientX - initialX;
    currentY = e.clientY - initialY;
    draggableElement.style.left = currentX + 'px';
    draggableElement.style.top = currentY + 'px';
  });
  document.addEventListener('mouseup', function() {
    dragging = false;
  });
  // 阻止选中文本，以便更顺畅地拖动
  draggableElement.addEventListener('selectstart', function(e) {
    e.preventDefault();
  });
</script>

</body>
</html>