jQuery implementiert die Praxis, die Position und Größe von div durch Ziehen der Maus zu ändern
|
Um einen Windows Forms ähnlichen Effekt zu erzielen, ziehen Sie in der Mitte, um die Position des Div zu ändern, ziehen Sie am Rand, um die Größe des Div zu ändern, und ändern Sie mit der Maus die entsprechende Form an der entsprechenden Position, wie in der Abbildung gezeigt: (Der Screenshot zeigt die Maus nicht.)
Der Code lautet wie folgt:
$(".test1").mousemove(Funktion(e){
$(".test1").unbind("mousedown");
$(".test1").css("cursor","Standard");
//$("span > b").text(parseInt($("div").width()));
var left = $(".test1").offset().left;
var top = $(".test1").offset().top;
// Wenn die Maus in der Mitte ist if(e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10
&& e.clientY - top > 10 && e.clientY-top < parseInt($(".test1").height()) - 10) {
$(".test1").css("Cursor","bewegen");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var y = e.pageY - $(".test1").offset().top;
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"left":e.pageX - x, "top":e.pageY - y});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
}
//Wenn sich die Maus in der oberen linken Ecke befindet if(e.clientX - left < 10 && e.clientY - top < 10) {
$(".test1").css("cursor","nw-resize");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY + parseInt($(".test1").css("Höhe"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX + parseInt($(".test1").css("Breite"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
}
//Wenn die Maus oben ist if(e.clientY - top < 10 && e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10) {
$(".test1").css("cursor","n-resize");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY + parseInt($(".test1").css("Höhe"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
}
//Wenn sich die Maus in der oberen rechten Ecke befindet if(e.clientY - top < 10 && e.clientX-left > parseInt($(".test1").width()) - 10) {
$(".test1").css("cursor","ne-resize");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY + parseInt($(".test1").css("Höhe"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
}
}).mouseup(Funktion() {
ismove = falsch;
});
});
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX - parseInt($(".test1").css("Breite"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"width":e.pageX - w});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
}
//Wenn die Maus rechts ist if(e.clientX-left > parseInt($(".test1").width()) - 10 && e.clientY - top > 10 && e.clientY-top < parseInt($(".test1").height()) - 10) {
$(".test1").css("cursor","e-resize");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX - parseInt($(".test1").css("Breite"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"width":e.pageX - w});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
}
//Wenn sich die Maus in der unteren rechten Ecke befindet if(e.clientX-left > parseInt($(".test1").width()) - 10 && e.clientY-top > parseInt($(".test1").height()) - 10) {
$(".test1").css("cursor","se-resize");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX - parseInt($(".test1").css("Breite"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"width":e.pageX - w});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY - parseInt($(".test1").css("Höhe"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"height":e.pageY - h});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
}
//Wenn die Maus gedrückt ist if(e.clientY-top > parseInt($(".test1").height()) - 10 && e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10) {
$(".test1").css("cursor","s-resize");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY - parseInt($(".test1").css("Höhe"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"height":e.pageY - h});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
}
//Wenn die Maus unten links ist if(e.clientY-top > parseInt($(".test1").height()) - 10 && e.clientX - left < 10) {
$(".test1").css("cursor","sw-resize");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX + parseInt($(".test1").css("Breite"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY - parseInt($(".test1").css("Höhe"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"height":e.pageY - h});
}
}).mouseup(Funktion() {
istmove = falsch;
});
});
}
//Wenn die Maus links ist if(e.clientX - left < 10 && e.clientY - top > 10 && e.clientY-top < parseInt($(".test1").height()) - 10) {
$(".test1").css("cursor","w-resize");
$(".test1").mousedown(Funktion(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX + parseInt($(".test1").css("Breite"));
$(Dokument).mousemove(Funktion(e) {
wenn(istbewegen) {
$(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
}
}).mouseup(Funktion() {
ismove = falsch;
});
});
}
});
Dies ist das Ende dieses Artikels darüber, wie Sie mit jQuery die Position und Größe eines Divs durch Ziehen mit der Maus ändern können. Weitere Informationen dazu, wie Sie mit jQuery ein Div mit der Maus ziehen können, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Detaillierte Erläuterung der MySQL-Existes- und Not-Existes-Beispiele
>>: So konfigurieren Sie die bidirektionale Zertifikatsüberprüfung auf dem Nginx-Proxyserver
Artikel empfehlen
Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele
Ich habe zuvor zum Einstieg in UDP ein einfaches ...
Implementierung eines einfachen Chatroom-Dialogs basierend auf WebSocket
In diesem Artikel finden Sie den spezifischen Cod...
Reines CSS für eine coole Ladeanimation
Schauen wir uns an, welche Ladeanimationseffekte ...
Analyse der Prinzipien und der Nutzung von Docker-Container-Datenvolumes
Was ist ein Containerdatenvolumen? Wenn sich die ...
Mehrere Methoden zur horizontalen und vertikalen Zentrierung von Div-Inhalten mit CSS3 Flex
1. Flex-Richtung: (Richtung der Elementanordnung)...
SQL-Skriptfunktion zum Schreiben einer PostgreSQL-Datenbank zur Implementierung der Analyse
In diesem Artikel wird hauptsächlich die SQL-Skri...
Nginx verwendet Lua+Redis, um IP dynamisch zu blockieren
1. Hintergrund Bei unserer täglichen Website-Wart...
So verwenden Sie das Vue-Router-Routing
Inhaltsverzeichnis 1. Beschreibung 2. Installatio...
Implementierung der Bereitstellung eines privaten Docker-Warehouse-Registrars
Da immer mehr Docker-Images verwendet werden, mus...
Ausnahmefehler beim Packen von Webpack-Dateien
Vor dem Verpacken im Webpack müssen wir sicherste...
Lassen Sie sich die tiefe Kopie von js verstehen
Inhaltsverzeichnis js tiefe Kopie Methode der Dat...
Detaillierte Erläuterung des Shared-Memory-Mechanismus von Nginx
Der gemeinsam genutzte Speicher von Nginx ist ein...
Singleton-Entwurfsmuster in JavaScript
Inhaltsverzeichnis 1. Was ist ein Entwurfsmuster?...
Optimierung von Datentabellen in MySQL-Datenbanken, Analyse von Fremdschlüsseln und Nutzung von drei Paradigmen
Dieser Artikel veranschaulicht anhand von Beispie...
Beispiele zum Hinzufügen, Ändern, Löschen und Löschen von Werten in der MySQL-Datenbank
3. MySQL-Datenverwaltung Die erste Methode: nicht...