如何为已实现拖拽的弹窗添加内置关闭与打开功能？

问题分析 #

你的代码核心问题是函数命名冲突：close是浏览器window对象的内置方法，自定义的同名函数会被覆盖，导致点击关闭按钮无响应。同时缺少打开弹窗的功能实现，以下是修复并完善后的完整代码。

修复后完整代码 #

HTML #

<div class="container" id='container' style="width: 600px;height: 400px;top:50px;left:50px;">
  <!-- 弹窗初始设为隐藏，方便测试打开功能 -->
  <div class="elem" id="elem" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 200px;height: 100px; display: none;">    
    <!-- 阻止事件冒泡，避免点击关闭时触发弹窗拖拽 -->
    <button onClick="closePopup(); event.stopPropagation();"> × </button>
  </div>
</div>
<!-- 添加打开弹窗的触发按钮 -->
<button onClick="openPopup()">打开弹窗</button>

CSS #

.container {
  position: absolute;
  background-color: blue;
}

.elem {
  position:absolute;
  background-color: green;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  padding: 10px;
}

.elem button {
  float: right;
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 18px;
  color: #fff;
}

JavaScript #

var mydragg = function() {
  return {
    move: function(divid, xpos, ypos) {
      divid.style.left = xpos + 'px';
      divid.style.top = ypos + 'px';
    },
    startMoving: function(divid, container, evt) {
      evt = evt || window.event;
      var posX = evt.clientX,
        posY = evt.clientY,
        // 处理初始位置为空的情况，避免报错
        divTop = divid.style.top || '0px',
        divLeft = divid.style.left || '0px',
        eWi = parseInt(divid.style.width),
        eHe = parseInt(divid.style.height),
        cWi = parseInt(document.getElementById(container).style.width),
        cHe = parseInt(document.getElementById(container).style.height);
      document.getElementById(container).style.cursor = 'move';
      divTop = divTop.replace('px', '');
      divLeft = divLeft.replace('px', '');
      var diffX = posX - divLeft,
        diffY = posY - divTop;
      document.onmousemove = function(evt) {
        evt = evt || window.event;
        var posX = evt.clientX,
          posY = evt.clientY,
          aX = posX - diffX,
          aY = posY - diffY;
        if (aX < 0) aX = 0;
        if (aY < 0) aY = 0;
        if (aX + eWi > cWi) aX = cWi - eWi;
        if (aY + eHe > cHe) aY = cHe - eHe;
        mydragg.move(divid, aX, aY);
      }
    },
    stopMoving: function(container) {
      document.getElementById(container).style.cursor = 'default';
      // 清空鼠标移动事件，避免内存泄漏
      document.onmousemove = null;
    },
  }
}();

// 重命名函数，避免与浏览器内置close方法冲突
function closePopup() {
  document.getElementById('elem').style.display = 'none';
}

// 添加打开弹窗的函数
function openPopup() {
  const elem = document.getElementById('elem');
  elem.style.display = 'block';
  // 可选：重置弹窗位置，也可保留上次拖拽的位置
  elem.style.left = '50px';
  elem.style.top = '50px';
}

关键修改说明 #

1. 函数重命名：将close改为closePopup，解决内置方法覆盖问题
2. 新增打开功能：添加openPopup函数和触发按钮，实现完整的弹窗开关逻辑
3. 阻止事件冒泡：关闭按钮添加event.stopPropagation()，避免点击关闭时触发弹窗拖拽
4. 容错处理：拖拽逻辑中处理初始位置为空的情况，防止报错
5. 样式优化：给关闭按钮添加基础样式，提升交互体验

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