jquery实现HTML源生dialog跟随鼠标位置移动

jQuery 实现 HTML 源生 dialog 随着鼠标位置移动，通常需要结合 CSS 和 JavaScript 来完成。下面是一个简单的步骤说明：

1. 首先，在 HTML 中创建一个 `<div>` 或者使用现有的 `<dialog>` 标签作为你的可拖动对话框。

<div id="draggable-dialog" class="ui-widget-content ui-front draggable">
  <p>这是可拖动的对话框内容...</p>
</div>

这里我们假设已经引入了 jQuery UI 的 CSS 和 JS 文件，因为 `draggable` 功能属于它。

2. 使用 jQuery UI 的 `draggable()` 方法，将其绑定到你的对话框上，并设置允许拖动的区域为整个元素。

$("#draggable-dialog").draggable({
  containment: 'document',
  helper: 'clone', // 创建一个可拖动的副本，原内容保持不变
});

`containment: 'document'` 表示允许对话框在整个文档范围内拖动。

3. 当用户开始拖动对话框时，你可以添加一个事件监听器来记录当前鼠标的坐标，然后动态更新对话框的位置。

var dialogPos = {}; // 初始化对话框当前位置

$("#draggable-dialog").on('dragstart', function(event, ui) {
  dialogPos.x = event.pageX;
  dialogPos.y = event.pageY;
});

$("#draggable-dialog").on('drag', function(event, ui) {
  $(this).css({
    left: event.pageX - dialogPos.x,
    top: event.pageY - dialogPos.y
  });
});

这将使对话框随着鼠标移动而实时调整位置。