如何实现仅通过头部拖动可拖拽Div？（仅使用JavaScript）

问题分析 #

你当前的代码存在两个核心问题：

1. JS拖拽逻辑未正确识别头部区域，导致整个Div都能被拖拽
2. HTML中冗余的拖拽事件与JS逻辑冲突，影响内部元素交互

解决方案 #

以下是修改后的完整代码，仅允许通过头部(elemTitle区域)拖拽Div，内部按钮、滑块等元素可正常点击/操作：

修改后的HTML

<div id="elem" style="width: 185px;height: 117px; display:block; z-index:11">
    <div class="elemTitle">
        play some music?
        <button style="text-align:right; float:right;" onClick="closePopup()"> x </button>
    </div>
    <div id="musicplayer">
        <div>
            <marquee scrollamount="8" class="songtitle"></marquee>
        </div>
 
        <table class="controls">
            <tr>
                <td>
                    <div class="prev-track" onclick="prevTrack()"><i class="fas fa-backward"></i></div>
                </td>
                <td>
                    <div class="playpause-track" onclick="playpauseTrack()" ><i class="fas fa-play"></i></div>
                </td>
                <td>
                    <div class="next-track" onclick="nextTrack()"><i class="fas fa-forward"></i></div>
                </td>
            </tr>
        </table>
 
        <div class="seeking">
            <div class="current-time">00:00</div>
 
            <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
 
            <div class="total-duration">0:00</div>
        </div>
 
        <audio id="music" src=""></audio> 
    </div>
</div>

修改后的JavaScript

dragElement(document.getElementById("elem"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  // 查找头部元素（通过class匹配）
  const header = elmnt.querySelector(".elemTitle");
  
  if (header) {
    // 仅绑定头部的鼠标按下事件作为拖拽触发点
    header.onmousedown = dragMouseDown;
  } else {
    // 兼容处理：如果找不到头部，允许整个Div拖拽
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    // 若点击的是头部内的按钮，不触发拖拽逻辑
    if (e.target.tagName === 'BUTTON') return;
    
    e.preventDefault();
    // 记录初始鼠标位置
    pos3 = e.clientX;
    pos4 = e.clientY;
    // 绑定鼠标抬起和移动事件
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // 计算鼠标移动偏移量
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // 更新Div的位置
    elmnt.style.top = `${elmnt.offsetTop - pos2}px`;
    elmnt.style.left = `${elmnt.offsetLeft - pos1}px`;
  }

  function closeDragElement() {
    // 移除事件绑定，结束拖拽
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

关键修改点 #

1. 移除冗余事件：删除了elem上的onmousedown和onmouseup属性，避免与JS拖拽逻辑冲突
2. 精准绑定拖拽触发点：通过querySelector(".elemTitle")找到头部区域，仅给头部绑定拖拽触发事件
3. 优化按钮交互：在dragMouseDown中判断点击目标是否为按钮，点击关闭按钮时不会触发拖拽
4. 保留内部元素功能：仅头部触发拖拽逻辑，内部的播放按钮、进度滑块等元素可正常点击和操作

内容的提问来源于stack exchange，提问作者sleepie