---
title: Drag
tags:
- ui
---
{% layout 'hippie/app.liquid' %}

{% 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">
			{% render 'hippie/partials/frame-header.liquid' %}
			<main></main>
			{% render 'hippie/partials/frame-mode.liquid' %}
		</div>
	</div>
</div>
{% endblock %}

{% block assets %}
{{ block.super -}}
<script src="/js/drag.js"></script>
{% endblock %}

{%- block 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 %}