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

{% extends "hippie/_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 %}
  <header class="io pos_fix pin_top pin_right pin_left">
    <button data-action="add">Add</button>
  </header>
  <div id="space"></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]');

    // 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, 800, 600, '#000');
    newDiv.createDiv();
    newDiv.appendToFrame(space);
  </script>
{% endblock %}