Während der Front-End-Entwicklung gibt es viele Orte, an denen Drag- und Drop-Effekte verwendet werden. Natürlich ist http://jqueryui.com/draggable/ eine gute Wahl, aber ich bin eine Person, die den Auflauf bricht und die Wahrheit fragt. Ich habe mir einige Zeit genommen, um ähnliche Plug-Ins mit JS zu implementieren, also werde ich nicht viel sagen.
Erstens: HTML und CSS
Die Codekopie lautet wie folgt:
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<Styles>
* {{
Rand: 0;
Polsterung: 0;
}
#div1 {
Position: absolut;
Breite: 100px;
Höhe: 100px;
Cursor: Bewegung;
Hintergrundfarbe: Rot;
}
</style>
</head>
<body>
<div id = "div1">
</div>
</body>
</html>
Implementieren Sie nun zuerst den Hauptalgorithmus:
Die Codekopie lautet wie folgt:
<Script>
window.onload = function () {
// Holen Sie sich das Div, das gezogen werden muss
var div1 = document.getElementById ("div1");
// Fügen Sie ein Mausdruckereignis hinzu
div1.onmousedown = function (evt) {
var oevent = evt || Ereignis;
// Holen Sie sich den Abstand vom Drücken der Maus nach Div links oben
var distancex = oevent.clientX - div1.offsetleft;
var distance = oevent.clientX - div1.offsettop;
// DOC -Schiebende Zeit hinzufügen
document.onmousemove = function (evt) {
var oevent = evt || Ereignis;
// den linken obersten Wert des Divs neu berechnen
var links = oevent.clientX - distancex;
var top = oevent.clienty - Entfernung;
// links, wenn weniger als oder gleich Null ist, auf Null gesetzt, um zu verhindern, dass das Teilen aus dem Dokument herauszieht
if (links <= 0) {
links = 0;
}
// Wenn links die rechte Grenze des Dokuments überschreitet, ist auf die rechte Grenze festgelegt
else if (links> = document.documentElement.clientwidth - div1.offsetwidth) {
links = document.documentElement.clientwidth - div1.offsetwidth;
}
if (top <= 0) {
Top = 0;
}
else if (top> = document.documentElement.clientHeight - div1.offseteight) {
top = document.documentElement.clientHeight - div1.offseteight;
}
// die DIV erneut zuweisen
div1.style.top = top + "px";
div1.style.left = links + "px";
}
// Fügen Sie ein Maus Lift -Event hinzu
div1.onmouseUp = function () {
// die Veranstaltung löschen
document.onmousemove = null;
div1.onmouseUp = null;
}
}
}
</script>
Ja, verwenden Sie eine objektorientierte Implementierung
Die Codekopie lautet wie folgt:
<Styles>
* {{
Rand: 0;
Polsterung: 0;
}
#div1 {
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: Rot;
}
#div2 {
Hintergrundfarbe: Gelb;
Breite: 100px;
Höhe: 100px;
}
</style>
<div id = "div1"> </div>
<div id = "div2"> </div>
JS Draggle Class:
Die Codekopie lautet wie folgt:
Funktion Drag (id) {
this.div = document.getElementById (id);
if (this.div) {
this.div.style.cursor = "move";
this.div.style.position = "Absolute";
}
this.disx = 0;
this.disy = 0;
var _this = this;
this.div.onmouseDown = function (evt) {
_this.getDistance (EVT);
document.onmousemove = function (evt) {
_this.setPosition (EVT);
}
_this.div.onmouseUp = function () {
_this.clearEvent ();
}
}
}
Drag.Prototype.getDistance = Funktion (evt) {
var oevent = evt || Ereignis;
this.disx = oevent.clientX - this.div.offsetLeft;
this.disy = oevent.clienty - this.div.offsettop;
}
Drag.Prototype.setPosition = Funktion (evt) {
var oevent = evt || Ereignis;
var l = oevent.clientX - this.disx;
var t = oevent.clienty - this.disy;
if (l <= 0) {
L = 0;
}
else if (l> = document.documentElement.clientwidth - this.div.offsetwidth) {
l = document.documentElement.clientwidth - this.div.offsetwidth;
}
if (t <= 0) {
t = 0;
}
else if (t> = document.documentElement.clientHeight - this.div.offseteight) {
t = document.documentElement.clientHeight - this.div.offseteight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
}
Drag.Prototype.ClearEvent = function () {
this.div.onmouseUp = null;
document.onmousemove = null;
}
Endlich: endgültige Implementierung:
Die Codekopie lautet wie folgt:
window.onload = function () {
neuer Drag ("Div1");
neuer Drag ("Div2");
}
Die Effekte sind wie folgt:
Das obige dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, JavaScript kompetenter zu beherrschen.