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
Tiefgreifendes Verständnis der Probleme mit der Transaktionsisolationsebene und dem Sperrmechanismus von MySQL
Überblick Datenbanken führen im Allgemeinen mehre...
Demo für 10-Farbverlaufshintergrund des CSS-Containers (linear-gradient())
Grammatik Hintergrund: linearer Farbverlauf (Rich...
vue cli3 implementiert die Schritte der Verpackung nach Umgebung
Das mit CLI3 erstellte Vue-Projekt wird als Nullk...
HTML-Tutorial: So ändern Sie Bildgröße, Ausrichtung, Abstand und Rahmenattribute
Bild-Tag : <img> Um ein Bild in eine Seite e...
jQuery realisiert dynamische Partikeleffekte
In diesem Artikel wird der spezifische Code von j...
Lösen Sie den Konflikt zwischen Docker und VMware
1. Docker-Startproblem: Problem gelöst: Sie müsse...
Lösen Sie das Problem, dass Docker-Container sofort nach dem Start beendet werden
Kürzlich habe ich mir angesehen, wie Docker es Co...
Detaillierte Beschreibung der Funktion von meta name="" content="
1. Grammatik: <meta name="Name" conte...
Erstellen Sie mit PS in zwei Minuten eine Homepage für eine XHTML+CSS-Website
Es gibt zu viele Artikel über Webstandards zur We...
Tutorial zur Installation von htop unter CentOS 8
Wenn Sie Ihr System interaktiv überwachen möchten...
Zusammenfassung des Wissens über Einbettungsanweisungen, die Vue-Ingenieure kapseln müssen
Inhaltsverzeichnis Vorwort Unterrichtsgrundlagen ...
HTML-Tabellen-Markup-Tutorial (14): Tabellenkopf
<br />In der HTML-Sprache können Sie der Tab...
Detaillierte Erklärung der reinen SQL-Anweisungsmethode basierend auf JPQL
JPQL steht für Java Persistence Query Language. B...
Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft
Das Projekt wurde in diesen Tagen getestet und de...
So fügen Sie Nginx dynamisch Module hinzu
Vorne geschrieben Nachdem wir Nginx basierend auf...