在mousedown之后移动鼠标时如何防止文本移动？

Question

我正在尝试编写一个可移动的对话框但是有一个问题。有时当我想通过移动对话框上方移动对话框而不是对话框本身时，标题文本正在移动，如下所示：

标题文字的

CSS ：

.arg-dialog-title{
    height: 20px;
    font-size: x-large;
    padding: 10px 30px 15px 30px;
    position: fixed;
    background-color: transparent;
    box-sizing: initial;
    font-weight: bold;
    outline: none;
    line-height: 1;
    border:0;
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
     text-decoration: none;
}

您可以在此fiddle找到所有代码和样式。

如何防止此操作发生？

Answer 1

尝试将以下样式应用于标题：

user-drag: none; 
user-select: none;

此外，让它听取mousemove事件并调整对话的位置。

Answer 2

在$(document).ready()活动中添加以下脚本。

document.getElementsByTagName("BODY")[0].onselectstart = function(e) {
    if ($(e.target).hasClass("arg-dialog-title") || 
       (e.target).hasClass("arg-dialog-close-button")) {
        e.preventDefault();
        return false;
    }
    return true;
  };

禁用的内容选择包含class = "arg-dialog-title"和class = "arg-dialog-close-button"的HTML元素。禁用对标题的选择也会阻止拖动。

然而，您可能没有注意到的是，如果您拖动关闭按钮，则会选择按钮本身以及标题，从而进行拖动。这样，我还添加了关闭按钮的课程。

我也更新了你的小提琴。请查看here。

如果您不希望用户选择您网站上的任何内容，除了输入或文字中的文字，请使用此脚本：

document.getElementsByTagName("BODY")[0].onselectstart = function(e) {
    if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") {
        e.preventDefault();
        return false;
    }
    return true;
};