Wie erstellt man Griffe auf jeder Seite eines div für die Größenänderung? - (NO jquery)

Question

Verwendung von reinem Javascript HTML5 und CSS3 (NICHT jQuery)

ich so etwas wie dieses Bild machen will, ich habe HTML-Elemente innerhalb des div, wie zum Beispiel eines Textbereich oder Wenn der Benutzer auf das Container-div klickt, möchte ich, dass die Handles und der Rahmen angezeigt werden. Der Benutzer sollte die Größe des Containers nur mit den Griffen ändern.

Wie kann ich das erreichen? Ich weiß, wie man die Ereignisse durchführt und die Größe ändert, aber nicht sicher, wie man die Griffe spezifisch herstellt und die Größe nur auf diesen Punkten ändert.

Sind die Griffe ein CSS-Trick? oder muss ich eine Grafik für den Container erstellen

Answer 1

Zuerst CSS wie folgt verwenden können (wie ein Hintergrundbild auf der Größe veränderbare div Container?):

div { 
    resize: both; 
    overflow: auto; 
} 

(http://www.w3schools.com/cssref/css3_pr_resize.asp);

Zu diesem Beitrag war ein gutes Javascript Beispiel: (How to make HTML element resizable using pure javascript?)

JS Beispiel:

• https://3eab2a8f4eb766679405d8435f06f1074dcb26e8.googledrive.com/host/0B5hS0tFSGjBZfkhKS1VobnFDTkJKR0tVamxadmlvTmItQ2pxVWR0WDZPdHZxM2hzS1J3ejQ/resizer /

• https://github.com/anhr/resizer