hippie/source/screens/demo/examples/ui/drag.njk

---
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>
    // Define the NewDiv class
    class NewDiv {
      constructor(x, y, width, height, backgroundColor) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.backgroundColor = backgroundColor;
        this.element = null;
      }

      // Create the div element
      createDiv() {
        this.element = document.createElement('div');
        this.element.style.position = 'absolute';
        this.element.style.left = `${this.x}px`;
        this.element.style.top = `${this.y}px`;
        this.element.style.width = `${this.width}px`;
        this.element.style.height = `${this.height}px`;
        this.element.style.background = this.backgroundColor;
        this.element.style.cursor = 'move';

        // Add event listeners for dragging
        let isDown = false;
        let offset = [0, 0];

        this.element.addEventListener('mousedown', (event) => {
          if (event.button === 0) { // Left mouse button
            isDown = true;
            offset = [
              this.element.offsetLeft - event.clientX,
              this.element.offsetTop - event.clientY
            ];
          }
        });

        document.addEventListener('mouseup', () => {
          isDown = false;
        });

        document.addEventListener('mousemove', (event) => {
          if (isDown) {
            const maxX = window.innerWidth - this.element.offsetWidth;
            const maxY = window.innerHeight - this.element.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;

            this.element.style.left = `${x}px`;
            this.element.style.top = `${y}px`;
          }
        });

        // Save position and size
        const saveData = () => {
          const data = {
            x: this.element.offsetLeft,
            y: this.element.offsetTop,
            width: this.element.offsetWidth,
            height: this.element.offsetHeight
          };
          // Save data to local storage or a database
          localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
        };

        // Load saved data
        const loadData = () => {
          const data = localStorage.getItem(`divData${this.element.id}`);
          if (data) {
            const parsedData = JSON.parse(data);
            this.element.style.left = `${parsedData.x}px`;
            this.element.style.top = `${parsedData.y}px`;
            this.element.style.width = `${parsedData.width}px`;
            this.element.style.height = `${parsedData.height}px`;
          }
        };

        // Call the save function when the user stops dragging
        document.addEventListener('mouseup', saveData);

        // Load saved data on page load
        loadData();
      }

      // Append the div to the space
      appendToFrame(space) {
        this.element.id = `newDiv${space.children.length}`;
        space.appendChild(this.element);
      }
    }

    // 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;
    }

    // Get the space element
    const space = document.getElementById('space');
    const addFrameButton = document.getElementById('addFrame');

    // Add event listener to the add space button
    addFrameButton.addEventListener('click', () => {
      const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
      newDiv.createDiv();
      newDiv.appendToFrame(space);
    });

    // Create a new NewDiv instance
    const newDiv = new NewDiv(100, 100, 800, 600, '#000');
    newDiv.createDiv();
    newDiv.appendToFrame(space);
  </script>
{% endblock %}