JavaScript zum Erzielen eines einfachen Drag-Effekts

//html
<div>
    <p>Ich bin eine blaue Box</p>
</div>

CSS
*{Rand: 0;Padding: 0;}
        div{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Kornblumenblau;
            Position: absolut;
        }
        P{
            Breite: 100px;
            Höhe: 100px;
            Zeilenhöhe: 100px;
            Schriftgröße: 10px;
            Farbe: #fff;
            Textausrichtung: zentriert;
            Übergang: 0,5 s alles;
        }
        p:hover{
            transformieren: übersetzenY(-5px);
            Übergang: 0,5 s alles;
            Box-Schatten: 10px 10px 5px grau;
}

var div = document.querySelector('div');
        var p = document.querySelector('p');
        //Zuerst die Variablen x und y definieren und initialisieren
        var x =0;
        var y = 0;
        // var i = 3;
        var TorF = false;
        //Der Text im Feld kann nicht ausgewählt werden div.onselectstart = function (e) {
            gibt false zurück;
        }
        div.addEventListener('mousedown',Funktion(e){
            // Client: Gib die Koordinaten des Mauszeigers aus, wenn die Maustaste gedrückt wird x = e.clientX;
            y = e.ClientY;
            // Format: obj.offsetLeft: Linken und oberen Offset abrufen // Besonderer Hinweis hierzu: Diese Eigenschaft ist schreibgeschützt und ihr kann kein Wert zugewiesen werden.
            // Gibt den Abstand zwischen dem aktuellen Element und der linken Seite des übergeordneten Elements (Body) zurück. // Hier deklarieren l und t keine globale Variable, sondern erstellen eine Eigenschaft eines globalen Objekts.
            l = div.OffsetLinks;
            t = div.OffsetTop;
            // Mauseinstellungen Pfeil bewegen div.style.cursor = 'move';
            p.innerHTML = 'Ich wurde gedrückt ^_^';
            TorF=wahr;
        });
        // Wenn der gesamte Bildschirm ein Bewegungsereignis auslöst document.addEventListener('mousemove',function(e){
            // Wenn es falsch ist, beende die Ausführung der Funktion und gib den Funktionswert zurück, wenn (Torf == false) {
                zurückkehren; 
            }
            //Definieren Sie lokale Variablen in dieser Funktion var twox = e.clientX;
            var twoy = e.clientY;
            //Verwende die ermittelten Koordinaten des Mauszeigers - (die Koordinaten des Mauszeigers - der Offset) = die tatsächliche Position des Mauszeigers //Die Einheit px muss am Ende hinzugefügt werden, da die ursprüngliche Erfassung keine Einheit hat var twol = twox - (xl);
            var twot = twoy - (yt); 
            div.style.left = zweil+'px';
            div.style.top = twot+'px';
            p.innerHTML = 'Ich werde geschleift-.-';
        });
        div.addEventListener('mouseup',Funktion(){
            // Mausbewegungsereignisse stoppen, wenn die Tastatur losgelassen wird. TorF= false;
            // Die Maus stellt den Standardstil wieder her div.style.cursor = 'default';
            p.innerHTML = „Ich wurde zurückgewiesen, QAQ“;
 })