首页
前端开发
Javascript
基于JavaScript的DIV元素拖拽功能实现

基于JavaScript的DIV元素拖拽功能实现

21 次浏览 0 条评论
rar
rar

提供了一种简洁通用的方法，利用JavaScript实现对指定DIV元素的拖拽功能。该方法仅需提供目标DIV元素的ID即可实现拖拽操作，无需复杂的配置和调用。

// 获取目标DIV元素
const targetDiv = document.getElementById('your-div-id');

// 添加mousedown事件监听器
targetDiv.addEventListener('mousedown', (event) => {
  // 记录鼠标点击位置与DIV元素左上角的偏移量
  const offsetX = event.clientX - targetDiv.offsetLeft;
  const offsetY = event.clientY - targetDiv.offsetTop;

  // 添加mousemove事件监听器，实现拖拽效果
  document.addEventListener('mousemove', moveDiv);

  // 添加mouseup事件监听器，结束拖拽
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', moveDiv);
  });

  // 拖拽函数
  function moveDiv(e) {
    targetDiv.style.left = e.clientX - offsetX + 'px';
    targetDiv.style.top = e.clientY - offsetY + 'px';
  }
});

使用方法:

  1. 将上述代码嵌入您的项目中。
  2. 将代码中的 'your-div-id' 替换为您想要拖拽的DIV元素的ID。

通过以上步骤，您即可轻松实现对指定DIV元素的拖拽功能。

rar 文件大小：1.05KB