Simple and small library to create draggable windows in websites
Free and open-source!
Raw size (windrag.js) → 2.5 kB
Zipped size (windrag.js) → 1.02 KB
windrag.create('.box', '.box');The first argument is the element that you want to get affected and the second argument is the activator (the element that will trigger the element provided in the first argument to move).
windrag.create('.box', '.box', {
position: 'relative',
css: 'background: blue;',
idLength: 6
});windrag.create('.box', '.box', {
limitMovement: true
});The above code should prevent the window from going out of screen. It is not perfect as the limit really depends on your layout, css, etc.
const window = windrag.create('.box', '.box');
windrag.hide(window.id);const window = windrag.create('.box', '.box');
windrag.maximize(window.id);If the window is already maximized then it will change it back to the original width and height. You can use the code below to test that.
<body style="height: 100vh;margin:0;padding:0;">
<div class="box" style="width: 300px; height: 300px; background: red;"></div>
<script type="module">
import { windrag } from 'https://cdn.jsdelivr.net/npm/windrag';
const window = windrag.create('.box', '.box');
windrag.maximize(window.id);
setTimeout(() => {
windrag.maximize(window.id);
}, 5000)
</script>
</body>.windrag-active {
z-index: 9999;
background: orange !important;
}The above code will make sure the active window appears at the top of all other windows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Windrag.js example</title>
</head>
<body style="height: 100vh;margin:0;padding:0;">
<div class="box" style="width: 300px; height: 300px; background: red;"></div>
<script type="module">
import { windrag } from 'https://cdn.jsdelivr.net/npm/windrag';
windrag.create('.box', '.box');
</script>
</body>
</html>