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
So beseitigen Sie den zusätzlichen Leerraum am unteren Rand der erstellten Webseite beim Surfen
Beim Erstellen von HTML-Webseiten mit Dreamweaver...
Details zum JavaScript-Abschluss
Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...
13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen
Inhaltsverzeichnis 1. Holen Sie sich einen zufäll...
Flex-Grow-, Flex-Shrink-, Flex-Basis- und Neun-Raster-Layout verstehen
1. Flex-Grow-, Flex-Shrink- und Flex-Basis-Eigens...
Vue implementiert 3 Möglichkeiten zum Wechseln zwischen Registerkarten und zum Beibehalten des Datenstatus
3 Möglichkeiten zum Implementieren des Tab-Wechse...
Zusammenfassung der Wissenspunkte zum Abdecken von Indizes in MySQL
Wenn ein Index die Werte aller abzufragenden Feld...
Lösung für abnormale Verbindungstabellen, die durch inkonsistente MySQL-Zeichensätze verursacht werden
Inhaltsverzeichnis 1. Lösung 2. MySQL-Zeichensatz...
jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird
Schauen wir uns zunächst meinen Fehlercode an. ht...
Vollständige Schritt-für-Schritt-Anleitung zur Installation und Deinstallation von MySQL 8.0.26
Inhaltsverzeichnis Vorwort 1. Installation 1. Dow...
Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten
Voraussetzung: Celery wird in Django eingeführt. ...
So installieren und implementieren Sie einen FTP-Image-Server unter Linux
Lesen Sie das Tutorial zum Einrichten eines FTP-S...
So verwenden Sie die REM-Anpassung in Vue
1. Entwicklungsumgebung vue 2. Computersystem Win...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12
Das Download- und Installationstutorial für MySQL...
Detaillierte Schritte für QT zum Herstellen einer Verbindung zur MySQL-Datenbank
Der erste Schritt besteht darin, das entsprechend...
Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)
Swap deaktivieren Wenn auf dem Server ein Datenba...