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
Konzept und Anwendungsbeispiele für die MySQL-Indexkardinalität
Dieser Artikel erläutert anhand von Beispielen da...
HTML ist eigentlich die Anwendung zum Erlernen mehrerer wichtiger Tags
Nachdem der Artikel „Dies wird eine Revolution“ er...
HTML-Sonderzeichen-Konvertierungstabelle
Charakter Dezimal Zeichennummer Entitätsname --- ...
So verwenden Sie Zen-Codierung in Dreamweaver
Nachdem ich meinen letzten Artikel „Zen Coding: Ei...
Einige Hinweise zum Ändern des innodb_data_file_path-Parameters von MySQL
Vorwort innodb_data_file_path wird verwendet, um ...
Die Verwendung und der Unterschied zwischen JavaScript-Pseudo-Array und Array
Pseudo-Arrays und Arrays In JavaScript sind mit A...
Perfekte Lösung für das Problem des CSS-Hintergrundbildpfads im Webpack
Innerhalb des Style-Tags der Vue-Komponente befin...
Eine kurze Diskussion über benutzerdefinierte VUE-Uni-App-Komponenten
1. Übergeordnete Komponenten können Daten über Re...
Vue implementiert eine Wettervorhersagefunktion
In diesem Artikel wird der spezifische Code von V...
Mysql NULL verursachte die Grube
Verwenden von NULL in Vergleichsoperatoren mysql&...
Eine kurze Erläuterung zum eleganten Löschen großer Tabellen in MySQL
Inhaltsverzeichnis 1. Truncate-Operation 1.1 Welc...
CSS-Syntax für Tabellenränder
<br /> CSS-Syntax für Tabellenränder Zu den ...
Webdesign: Wenn der Titel nicht vollständig angezeigt werden kann
<br />Ich habe mir heute die neu gestaltete ...
Häufige Ursachen und Lösungen für langsame MySQL-SQL-Anweisungen
1. Langsame Abfrage aufgrund fehlenden oder ungül...
Natives JS zur Realisierung eines springenden Balls
Aus einer Laune heraus habe ich eine Fallstudie ü...