Question

我在HTML5对话框元素中有一个问题，jQuery UI可拖动。当我将对话框拖动到可拖动状态后，鼠标指针将从dilaogbox中移开。

请参阅此jsfiddle代码。

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

Answer 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");
  }
});

您可以在不同的浏览器中测试它，并查看每种浏览器的各种响应时间。

jQuery UI draggable的HTML5对话框元素问题

1 个答案: