jQuery UI 可拖动的 HTML5 对话框元素问题答案

【问题标题】：HTML5 dialog element issue with jQuery UI draggablejQuery UI 可拖动的 HTML5 对话框元素问题
【发布时间】：2016-10-05 09:54:38
【问题描述】：

我在可拖动 jQuery UI 的 HTML5 对话框元素中遇到问题。当我在使对话框可拖动后拖动我的对话框时，鼠标指针从对话框中消失了。

请查看此jsfiddle 代码。

请在 chrome 浏览器中验证这一点，因为 firefox 不支持对话框元素。

【问题讨论】：

我相信这是由于对话框元素的宽度和边距造成的。
@Twisty - 是的，非常感谢！这么明显的东西我怎么没看到？

标签： html jquery-ui dialog jquery-ui-draggable

【解决方案1】：

我认为您不会改进拖动功能本身。会有一些拖拽延迟，因为代码必须等待有足够的间隙来识别移动。默认的delay 是0（在 1.12 中已弃用）。

所以我不认为你这是可以纠正的。

我知道你没有要求它，但这里是跨浏览器测试，你可以看到每个浏览器和每个解决方案都有这个问题，即鼠标在移动之前最初可能会偏离元素的边界元素可以赶上。

测试示例：http://fiddle.jshell.net/Twisty/ghn5tje1/

CSS

dialog {
  margin: 0;
}

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

jQuery

$(function() {
  var dialog;
  if (typeof HTMLDialogElement === 'function') {
    dialog = $('dialog');
    dialog[0].show();
    $("#draggable").draggable();
  } else {
    var newDiag = $("<div>", {
      id: "draggable"
    }).css("padding", "1em").dialog({
      dialogClass: "no-titlebar",
      resizable: false,
      minWidth: "1em",
      minHeight: "1em",
      draggable: false
    });
    newDiag.parent().draggable();
    var content = $("#draggable").html();
    $("#draggable").remove();
    dialog = newDiag.html(content).dialog("open");
  }
});

您可以在不同的浏览器中对此进行测试，并查看每个浏览器的不同响应时间。

【讨论】：