What is the method to develop a JavaScript window that can be dragged and resized?

Other Questions JavaScript
1

I am looking to build a JavaScript window that is both draggable and resizable, ensuring it works across different browsers. I prefer to achieve this without relying on any frameworks. Can anyone provide an example or code snippet that demonstrates how to implement this functionality?

2

To develop a draggable and resizable JavaScript window without using external frameworks, you can extend the basic setup using native HTML, CSS, and JavaScript. Below is a more complete example that includes both dragging and resizing functionality:

<div id="myWindow" style="width:200px;height:150px;border:1px solid #000;position:absolute;">
  <div id="titleBar" style="background-color:gray;cursor:move;">Drag here</div>
  <div style="width:100%;height:100%;background-color:lightgray;">Content</div>
</div>

<script>

const element = document.getElementById(‘myWindow’);

const bar = document.getElementById(‘titleBar’);


bar.onmousedown = function(e) {

let offsetX = e.clientX - parseInt(window.getComputedStyle(element).left);

let offsetY = e.clientY - parseInt(window.getComputedStyle(element).top);


document.onmousemove = (e) => {

element.style.left = (e.clientX - offsetX) + ‘px’;

element.style.top = (e.clientY - offsetY) + ‘px’;

};


document.onmouseup = () => {

document.onmousemove = null;

};

};


// Resizing logic

let isResizing = false;

const initResizer = document.createElement(‘div’);

initResizer.style.width = ‘10px’;

initResizer.style.height = ‘10px’;

initResizer.style.background = ‘blue’;

initResizer.style.position = ‘absolute’;

initResizer.style.right = ‘0’;

initResizer.style.bottom = ‘0’;

initResizer.style.cursor = ‘se-resize’;

initResizer.addEventListener(‘mousedown’, (e) => {

isResizing = true;

document.onmousemove = (e) => {

if (isResizing) {

element.style.width = e.clientX - element.getBoundingClientRect().left + ‘px’;

element.style.height = e.clientY - element.getBoundingClientRect().top + ‘px’;

}

};


document.onmouseup = () => {

isResizing = false;

document.onmousemove = null;

};

});


element.appendChild(initResizer);

</script>

This comprehensive script includes a draggable title bar and a resizable corner. It handles both movement and size adjustments using mouse events, making it versatile across modern web browsers for improved user interaction.

3

To enhance your JavaScript window with seamless drag-and-resize functionalities without relying on external frameworks, consider implementing features that streamline usability and performance. Here is an example that builds upon previous solutions, offering an intuitive user experience:

<style>
  #myWindow {
    width: 250px;
    height: 200px;
    border: 1px solid #000;
    position: absolute;
    display: flex;
    flex-direction: column;
  }

  #titleBar {
    background-color: #ccc;
    cursor: grab;
    padding: 5px;
  }

  #content {
    flex-grow: 1;
    background-color: #eee;
  }

  .resizer {
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
  }
</style>

<div id="myWindow">
  <div id="titleBar">Drag here</div>
  <div id="content">Content</div>
  <div class="resizer"></div>
</div>

<script>
const myWindow = document.getElementById('myWindow');
const titleBar = document.getElementById('titleBar');
const resizer = document.querySelector('.resizer');

// Dragging logic
let offsetX, offsetY;
titleBar.onmousedown = function (e) {
  offsetX = e.clientX - myWindow.offsetLeft;
  offsetY = e.clientY - myWindow.offsetTop;
  document.onmousemove = (e) => {
    myWindow.style.left = (e.clientX - offsetX) + 'px';
    myWindow.style.top = (e.clientY - offsetY) + 'px';
  };

  document.onmouseup = () => {
    document.onmousemove = null;
  };
};

// Resizing logic
let isResizing = false;
resizer.onmousedown = (e) => {
  isResizing = true;
  document.onmousemove = (e) => {
    if (isResizing) {
      myWindow.style.width = e.clientX - myWindow.offsetLeft + 'px';
      myWindow.style.height = e.clientY - myWindow.offsetTop + 'px';
    }
  };

  document.onmouseup = () => {
    isResizing = false;
    document.onmousemove = null;
  };
};
</script>

This example creates a draggable window with a resize handle at the bottom corner. The styling ensures clarity and functionality, maintaining cross-browser compatibility. This code leverages basic CSS flex properties for layout management and a draggable icon for user-friendly interaction.

4

You can make a window draggable and resizable with HTML, CSS, and JavaScript like this:

<div id="draggable" style="width:200px;height:150px;border:1px solid #000;position:absolute;">
  <div id="dragHandle" style="background-color:gray;cursor:move;width:100%;">Drag here</div>
</div>

<style>
  #resizer { width: 10px; height: 10px; background: blue; position: absolute; right: 0; bottom: 0; cursor: se-resize; }
</style>

<script>
const element = document.getElementById('draggable');
const handle = document.getElementById('dragHandle');
let offsetX, offsetY, isResizing = false;

handle.onmousedown = (e) => {
  offsetX = e.clientX - element.offsetLeft;
  offsetY = e.clientY - element.offsetTop;
  document.onmousemove = (e) => {
    element.style.left = (e.clientX - offsetX) + 'px';
    element.style.top = (e.clientY - offsetY) + 'px';
  };
  document.onmouseup = () => document.onmousemove = null;
};

const resizer = document.createElement('div');
resizer.className = 'resizer';
resizer.onmousedown = () => {
  isResizing = true;
  document.onmousemove = (e) => {
    if (isResizing) {
      element.style.width = e.clientX - element.offsetLeft + 'px';
      element.style.height = e.clientY - element.offsetTop + 'px';
    }
  };
  document.onmouseup = () => isResizing = document.onmousemove = null;
};

element.appendChild(resizer);
</script>