<div id="resizable" style="background-color: blue; width: 100px; height: 100px; position: relative;"></div>

<script>
let resizable = document.getElementById("resizable");
let handler = document.createElement("div");
handler.style.width = "100%";
handler.style.height = "10px";
handler.style.backgroundColor = "gray";
handler.style.position = "absolute";
handler.style.bottom = "0";
handler.style.cursor = "ns-resize";
resizable.appendChild(handler);

let startY, startHeight;
let isResizing = false;

resizable.addEventListener("mousedown", initDrag);
resizable.addEventListener("touchstart", initDrag);
handler.addEventListener("mousedown", initResize);
handler.addEventListener("touchstart", initResize);

function initDrag(e) {
  if (isResizing) return; // prevent dragging when resizing
  e.preventDefault();
  let startX = e.clientX || e.touches[0].clientX;
  let startY = e.clientY || e.touches[0].clientY;
  let offsetX = resizable.offsetLeft;
  let offsetY = resizable.offsetTop;
  document.addEventListener("mousemove", drag);
  document.addEventListener("touchmove", drag);
  document.addEventListener("mouseup", stopDrag);
  document.addEventListener("touchend", stopDrag);

function drag(e) {
let clientX = e.clientX || e.touches[0].clientX;
let clientY = e.clientY || e.touches[0].clientY;
let left = offsetX + clientX - startX;
let top = offsetY + clientY - startY;
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
if (left + resizable.offsetWidth > window.innerWidth) {
left = window.innerWidth - resizable.offsetWidth;
}
if (top + resizable.offsetHeight > window.innerHeight) {
top = window.innerHeight - resizable.offsetHeight;
}
resizable.style.left = left + "px";
resizable.style.top = top + "px";
}

function stopDrag() {
document.removeEventListener("mousemove", drag);
document.removeEventListener("touchmove", drag);
}
}

function initResize(e) {
isResizing = true; // set the flag to indicate that resizing is in progress
e.preventDefault();
startY = e.clientY || e.touches[0].clientY;
startHeight = resizable.clientHeight;
document.addEventListener("mousemove", resize);
document.addEventListener("touchmove", resize);
document.addEventListener("mouseup", stopResize);
document.addEventListener("touchend", stopResize);
}

function resize(e) {
let clientY = e.clientY || e.touches[0].clientY;
let newHeight = startHeight(clientY - startY);
if (newHeight < 0) {
newHeight = 0;
}
if (newHeight + resizable.offsetTop > window.innerHeight) {
newHeight = window.innerHeight - resizable.offsetTop;
}
resizable.style.height = newHeight + "px";
}
function stopResize() {
document.removeEventListener("mousemove", resize);
document.removeEventListener("touchmove", resize);
isResizing = false; // reset the flag to indicate that resizing has stopped
}
</script>

document.addEventListener("click", function(event) {
    if (!event.target.closest('.bb-popup, .chx-color-bb-prompt, .chx-image-bb-prompt, .chx-link-bb-prompt, .chxicon-plus') && window.getSelection().toString() == "") {
        let elements = document.querySelectorAll('.bb-popup, .chx-color-bb-prompt, .chx-image-bb-prompt, .chx-link-bb-prompt');
        elements.forEach(function(element) {
            element.style.display = "none";
        });
    }
});

document.querySelector('.bb-container').addEventListener('click', function(event) {
  if (event.target.matches('.bb1')) {
    bbtags("shoutbox-comment", "[b]", "[/b]");
  } else if (event.target.matches('.bb2')) {
    bbtags("shoutbox-comment", "[u]", "[/u]");
  } else if (event.target.matches('.bb3')) {
    bbtags("shoutbox-comment", "[i]", "[/i]");
  } else if (event.target.matches('.bb4')) {
    // Code to handle bb4
  } else if (event.target.matches('.bb5')) {
    // Code to handle bb5
  } else if (event.target.matches('.bb6')) {
    // Code to handle bb6
  }
});