left: -5px;
position: absolute;
cursor: nw-resize;
}
.window>.drag-ld{
background-color: red;
width: 10px;
height: 10px;
top: calc(100% - 5px);
left: -5px;
position: absolute;
cursor: sw-resize;
}
1
index.html
@@ -62,6 +62,7 @@
Hello
33
js/window.js
@@ -4,6 +4,7 @@ windowh = document.querySelectorAll(".desktop")[0].offsetHeight-45;
dragrd = wwindow.querySelectorAll(".drag-rd")[0];
dragru = wwindow.querySelectorAll(".drag-ru")[0];
draglu = wwindow.querySelectorAll(".drag-lu")[0];
dragld = wwindow.querySelectorAll(".drag-ld")[0];
dragwindow = wwindow.querySelectorAll(".title")[0];
window.addEventListener('click', function(e){
@@ -129,6 +130,38 @@ draglu.onmousedown = function (event) {
document.addEventListener('mousemove', onMouseMove);
wwindow.onmouseup = function () {
document.removeEventListener('mousemove', onMouseMove);
wwindow.onmouseup = null;
};
};
dragld.onmousedown = function (event) {
let top = wwindow.getBoundingClientRect().top;
let right = wwindow.getBoundingClientRect().right;
let left = wwindow.getBoundingClientRect().left;
function resize(w, h, x) {
if (w > 200) {
wwindow.style.left = x + 'px';
wwindow.style.width = w + 'px';
}
if (h > 200) {
wwindow.style.height = h + 'px';
}
}
function onMouseMove(event) {
if (event.pageY < windowh && event.pageY > 1 && event.pageX < windoww && event.pageX > 1)
resize(right - event.clientX, event.clientY - top, event.clientX);
else {
document.removeEventListener('mousemove', onMouseMove);
wwindow.onmouseup = null;
}
}
document.addEventListener('mousemove', onMouseMove);
wwindow.onmouseup = function () {
document.removeEventListener('mousemove', onMouseMove);
wwindow.onmouseup = null;