Wie kann ich verhindern, dass sich Text bewegt, wenn ich die Maus nach dem Mausklick bewege?

Question

Ich versuche, einen beweglichen Dialog zu schreiben, aber es gibt ein Problem. Manchmal, wenn ich den Dialog bewegen möchten, indem Sie irgendwo über dem Dialog zu bewegen, anstelle des Dialogs selbst, der Titeltext bewegt, wie unten gezeigt:

CSS für den Titeltext:

.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; 
} 

Sie können alle Codes und Stile in diesem fiddle finden.

Wie kann ich verhindern, dass diese Aktion auftritt?

Answer 1

versuchen Sie die folgende Art Ihres Titel Anwendung:

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

Auch an die mousemove Veranstaltung und stellen Sie die Position des Dialogs machen hören.

Answer 2

Fügen Sie das folgende Skript in Ihrem $(document).ready() Ereignis hinzu.

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; 
    }; 

Was sie tut, ist deaktiviert wählen Sie für das HTML-Element mit class = "arg-dialog-title" und class = "arg-dialog-close-button". Durch das Deaktivieren der Auswahl im Titel wird auch das Ziehen verhindert.

Was Sie jedoch vielleicht nicht bemerkt haben ist, dass wenn Sie die Schließen-Schaltfläche ziehen, die Schaltfläche selbst zusammen mit dem Titel ausgewählt und daher gezogen wird. So habe ich auch die Klasse der Schließen-Schaltfläche hinzugefügt.

Ich aktualisierte auch deine Geige. Überprüfen Sie es here.

---

Wenn Sie nicht möchten, dass die Benutzer etwas auf Ihrer Website wählen, außer Text in Ein- oder Textbereichen dann diesen Skript verwenden:

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