ElementPuls Dialog可拖拽对话框且可操作其他Dom

要实现一个可拖拽的对话框并且能够操作其他DOM元素，你可以使用JavaScript和CSS。以下是一个简单的实现示例：

HTML:

<div id="dialog" style="width: 200px; height: 100px; background-color: #ddd;">
  拖动我
</div>
<button id="close-dialog">关闭对话框</button>

CSS:

#dialog {
  position: absolute;
  cursor: move;
  z-index: 10;
}

JavaScript:

let dragging = false;
let mouseX, mouseY, offsetX, offsetY;
 
const dialog = document.getElementById('dialog');
 
dialog.addEventListener('mousedown', function(event) {
  dragging = true;
  mouseX = event.clientX;
  mouseY = event.clientY;
  offsetX = dialog.offsetLeft;
  offsetY = dialog.offsetTop;
});
 
document.addEventListener('mouseup', function() {
  dragging = false;
});
 
document.addEventListener('mousemove', function(event) {
  if (dragging) {
    const dx = event.clientX - mouseX;
    const dy = event.clientY - mouseY;
    dialog.style.left = (offsetX + dx) + 'px';
    dialog.style.top = (offsetY + dy) + 'px';
  }
});
 
document.getElementById('close-dialog').addEventListener('click', function() {
  dialog.style.display = 'none';
});

这段代码实现了一个可拖拽的对话框，并且有一个按钮可以关闭对话框。用户可以点击并拖动对话框，而且在拖动的过程中不会影响页面上的其他元素的交互。