133 lines
No EOL
3.2 KiB
Text
Executable file
133 lines
No EOL
3.2 KiB
Text
Executable file
---
|
|
title: Drag
|
|
tags:
|
|
- demoExample
|
|
---
|
|
{% set pageId = page.fileSlug %}
|
|
{% set pageClass = "h_full_view" %}
|
|
{% set bodyClass = "body_drag" %}
|
|
|
|
{% extends "demo/_app.njk" %}
|
|
|
|
{% block title %}{{ title }}{% endblock %}
|
|
|
|
{% block links %}
|
|
{{ super() }}
|
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div id="space"></div>
|
|
<button id="addFrame">Add</button>
|
|
{% endblock %}
|
|
|
|
{%- block script %}
|
|
<script>
|
|
// Get the space element
|
|
const space = document.getElementById('space');
|
|
const addFrameButton = document.getElementById('addFrame');
|
|
|
|
// Function to create a new div element
|
|
function createNewDiv() {
|
|
const newDiv = document.createElement('div');
|
|
newDiv.style.position = 'absolute';
|
|
newDiv.style.width = '100px';
|
|
newDiv.style.height = '100px';
|
|
newDiv.style.cursor = 'move';
|
|
|
|
// Add event listeners for dragging
|
|
let isDown = false;
|
|
let offset = [0, 0];
|
|
|
|
// Generate a random background color
|
|
const randomColor = getRandomColor();
|
|
newDiv.style.background = randomColor;
|
|
|
|
newDiv.addEventListener('mousedown', (event) => {
|
|
if (event.button === 0) { // Left mouse button
|
|
isDown = true;
|
|
offset = [
|
|
newDiv.offsetLeft - event.clientX,
|
|
newDiv.offsetTop - event.clientY
|
|
];
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
isDown = false;
|
|
});
|
|
|
|
document.addEventListener('mousemove', (event) => {
|
|
if (isDown) {
|
|
const maxX = window.innerWidth - newDiv.offsetWidth;
|
|
const maxY = window.innerHeight - newDiv.offsetHeight;
|
|
let x = event.clientX + offset[0];
|
|
let y = event.clientY + offset[1];
|
|
|
|
// Boundary checks
|
|
if (x < 0) x = 0;
|
|
if (y < 0) y = 0;
|
|
if (x > maxX) x = maxX;
|
|
if (y > maxY) y = maxY;
|
|
|
|
newDiv.style.left = `${x}px`;
|
|
newDiv.style.top = `${y}px`;
|
|
}
|
|
});
|
|
|
|
// Save position and size
|
|
const saveData = () => {
|
|
const data = {
|
|
x: newDiv.offsetLeft,
|
|
y: newDiv.offsetTop,
|
|
width: newDiv.offsetWidth,
|
|
height: newDiv.offsetHeight
|
|
};
|
|
// Save data to local storage or a database
|
|
localStorage.setItem(`divData${newDiv.id}`, JSON.stringify(data));
|
|
};
|
|
|
|
// Load saved data
|
|
const loadData = () => {
|
|
const data = localStorage.getItem(`divData${newDiv.id}`);
|
|
if (data) {
|
|
const parsedData = JSON.parse(data);
|
|
newDiv.style.left = `${parsedData.x}px`;
|
|
newDiv.style.top = `${parsedData.y}px`;
|
|
newDiv.style.width = `${parsedData.width}px`;
|
|
newDiv.style.height = `${parsedData.height}px`;
|
|
}
|
|
};
|
|
|
|
// Add the new div to the space
|
|
newDiv.id = `newDiv${space.children.length}`;
|
|
space.appendChild(newDiv);
|
|
|
|
// Call the save function when the user stops dragging
|
|
document.addEventListener('mouseup', saveData);
|
|
|
|
// Load saved data on page load
|
|
loadData();
|
|
}
|
|
|
|
// Function to generate a random color
|
|
function getRandomColor() {
|
|
const letters = '0123456789ABCDEF';
|
|
let color = '#';
|
|
for (let i = 0; i < 6; i++) {
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
}
|
|
return color;
|
|
}
|
|
|
|
// Add event listener to the add space button
|
|
addFrameButton.addEventListener('click', createNewDiv);
|
|
|
|
// Create the first new div element
|
|
createNewDiv();
|
|
</script>
|
|
{% endblock %} |