Mit dem Wandel der Zeit wird die Bedeutung von js immer deutlicher, da js nicht nur Webseiten (z. B. das Ext-Framework) erstellen kann, sondern auch einige Web-Spezialeffekte, die nicht nur mit PCs kompatibel sind Bei Mobiltelefonen basieren sie schließlich auf dem Browser und haben nichts mit der Plattform zu tun. Jetzt können Microsofts Windows 8-System-Apps mit js entwickelt werden. Wenn Sie Zeit haben, können Sie es versuchen.
Kommen wir nun zum Punkt und sprechen darüber, wie man ziehbares Div in js implementiert. Um diese Funktion zu erreichen, sprechen wir zunächst über die Idee:
1. Erfassen Sie das Mousedown-Ereignis des Maus-Divs
2. Erfassen Sie das Mausbewegungsereignis des Dokuments
3. Brechen Sie die Veranstaltung ab
Dann schauen wir uns den Code an:
Kopieren Sie den Codecode wie folgt:
Funktion Drag(id) {
var $ = Funktion (Flag) {
return document.getElementById(flag);
}
$(id).onmousedown = Funktion (e) {
var d = Dokument;
var page = {
Ereignis: Funktion (evt) {
var ev = evt ||. window.event;
Rückkehr ev;
},
pageX: Funktion (evt) {
var e = this.event(evt);
return e.pageX ||. (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
pageY: Funktion (evt) {
var e = this.event(evt);
return e.pageY ||. (e.clientY + document.body.scrollTop - document.body.clientTop);
},
LayerX: Funktion (evt) {
var e = this.event(evt);
return e.layerX ||.
},
LayerY: Funktion (evt) {
var e = this.event(evt);
return e.layerY ||.
}
}
var x = page.layerX(e);
var y = page.layerY(e);
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = Funktion (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup = function () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
}
}
Code-Analyse:
1.
Holen Sie sich ein Div-Objekt
Kopieren Sie den Codecode wie folgt:
var $ = Funktion (Flag) {
return document.getElementById(flag);
}
2. Erfassen Sie das Mousedown-Ereignis des Dokuments:
Da ist dieser Code drin:
Kopieren Sie den Codecode wie folgt:
var page = {
Ereignis: Funktion (evt) {
var ev = evt ||. window.event;
Rückkehr ev;
},
pageX: Funktion (evt) {
var e = this.event(evt);
return e.pageX ||. (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
pageY: Funktion (evt) {
var e = this.event(evt);
return e.pageY ||. (e.clientY + document.body.scrollTop - document.body.clientTop);
},
LayerX: Funktion (evt) {
var e = this.event(evt);
return e.layerX ||.
},
LayerY: Funktion (evt) {
var e = this.event(evt);
return e.layerY ||.
}
}
Unter diesen ruft „event“ das Mausereignis ab, „pageX“ und „pageY“ erhalten die Koordinaten der Maus, „layerX“ und „layerY“ erhalten den Abstand zwischen der Maus und dem Div-Rand.
Es gibt auch einen Code:
Kopieren Sie den Codecode wie folgt:
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
Dies dient dazu, die MouseMove- und MouseUp-Ereignisse des Div zu erfassen. Wenn Sie tx nicht kennen, können Sie es online überprüfen.
3. MouseMove- und MouseUp-Ereignisse des Dokuments:
Kopieren Sie den Codecode wie folgt:
d.onmousemove = Funktion (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup = function () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
Unter diesen sind tx und ty die wichtigsten Codes, die zum Festlegen der Div-Koordinaten verwendet werden.
Manche Leute fragen sich vielleicht, warum -x,-y?
x, y erhalten tatsächlich den Abstand zwischen der Maus und dem Div-Rand, wenn dieser nicht subtrahiert wird
Die Koordinaten des Mauspfeils entsprechen den X- und Y-Koordinaten des Div. Nach dem Ziehen verschiebt sich die Mausposition in die obere linke Ecke. Der Effekt besteht darin, dass sie nach dem Ziehen springt.
Kopieren Sie den Codecode wie folgt:
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
Der obige Code dient dazu, die Ereignisse onmousemove und onmouseup des Dokuments abzubrechen, nachdem die Maus losgelassen wurde.
Ich habe kürzlich js gelernt und werde meine neuen Erfahrungen in Zukunft mit Ihnen teilen. Ich hoffe, gemeinsam mit allen zu lernen und Fortschritte zu machen.