---
title: Drag
tags:
  - ui
---
{% set pageId = page.fileSlug %}

{% extends "hippie/_app_frame.njk" %}

{% block body %}
  <header class="io pos_fix pin_top pin_right pin_left">
    <button data-action="add">Add</button>
  </header>
  <div id="space"></div>
  <div>
    <div id="test">
      <div class="body_frame">
        {{ io.frameHeader('title-bar') }}
        <main></main>
        {{ io.frameFooter('mode-bar') }}
      </div>
    </div>
  </div>
{% endblock %}

{%- block script %}
  <script src="{{ pageBase }}js/_ui.js"></script>
  <script>
    // Get the space element
    const space = document.getElementById('space');
    const add = document.querySelector('[data-action=add]');
    const test = document.getElementById('test');

    // Add event listener to the add space button
    add.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, 200, 200, '#000');
    newDiv.createDiv();
    newDiv.appendToFrame(space);

    const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
    explorer.createDiv();
    explorer.appendToFrame(space);
  </script>
{% endblock %}